Table 表单样式
<style>
table th
{
white-space: nowrap;
background-color: #f5f5f5;
height:30px;
font-size:14px;
font-weight:lighter; /*细*/
text-align:right ! important
}
.chk
{
white-space: nowrap;
text-overflow:ellipsis;/*省略*/
}
table td
{
/*word-break:keep-all;*/
white-space:nowrap; /*不换行*/
text-overflow:ellipsis;
}
</style>
<table border="1" bordercolor="#a0c6e5" style="border-collapse: collapse; width: auto">
<tr>
<th>
测试:
</th>
<td style="border: solid 1px #a0c6e5; height: 20px;" >
<input type="text" value="" placeholder="Valid Email Address" />
<input type="button" value="submit"/>
</td>
<th>
测试:
</th>
<td style="border: solid 1px #a0c6e5; height: 20px;">
<input type="text" value="" placeholder="Valid Email Address" />
</td>
<th>
测试:
</th>
<td style="border: solid 1px #a0c6e5; height: 20px;">
<input type="text" value="" placeholder="Valid Email Address" />
</td>
<th>
测试:测试:测试:
</th>
<td style="border: solid 1px #a0c6e5; height: 20px;">
<input type="text" value="" placeholder="Valid Email Address" />
</td>
<th>
测试:测试:测试:
</th>
<td style="border: solid 1px #a0c6e5; height: 20px;">
<input type="text" value="" placeholder="Valid Email Address" />
</td>
<th>
测试:测试:测试:
</th>
<td style="border: solid 1px #a0c6e5; height: 20px;" class="chk">
<input type="checkbox" />
男
<input type="checkbox" />
女
</td>
</tr>
<tr>
<th>
测试:
</th>
<td style="border: solid 1px #a0c6e5; height: 20px;">
<input type="text" value="" />
</td>
<th>
测试:
</th>
<td style="border: solid 1px #a0c6e5; height: 20px;">
<input type="text" value="" />
</td>
<th>
测试:
</th>
<td style="border: solid 1px #a0c6e5; height: 20px;">
<input type="text" value="" />
</td>
<th>
测试:测试:测试:
</th>
<td style="border: solid 1px #a0c6e5; height: 20px;">
<input type="text" value="" />
</td>
<th>
测试:测试:测试:
</th>
<td style="border: solid 1px #a0c6e5; height: 20px;">
<input type="text" value="" />
</td>
<th>
测试:测试:测试:
</th>
<td style="border: solid 1px #a0c6e5; height: 20px;" class="chk">
<input type="checkbox" />
男
<input type="checkbox" />
女
</td>
</tr>
<tr>
<th>
测试:
</th>
<td style="border: solid 1px #a0c6e5; height: 20px;">
<input type="text" value="" />
</td>
<th>
测试:
</th>
<td style="border: solid 1px #a0c6e5; height: 20px;">
<input type="text" value="" />
</td>
<th>
测试:
</th>
<td style="border: solid 1px #a0c6e5; height: 20px;">
<input type="text" value="" />
</td>
<th>
测试:测试:测试:
</th>
<td style="border: solid 1px #a0c6e5; height: 20px;" colspan="3">
<input type="text" value="" style="width: 99%" />
</td>
<th>
测试:测试:测试:
</th>
<td style="border: solid 1px #a0c6e5; height: 20px;" class="chk">
<input type="checkbox" />
男
<input type="checkbox" />
女
<input type="checkbox" />
女
</td>
</tr>
</table>
Table 表单样式的更多相关文章
- 还不错的Table样式和form表单样式
作为一个后台开发人员而言,拥有一套属于自己的前台样式是比较重要的,这里分享一下自己感觉还不错的样式,以后遇到好的,还会陆续添加 上图: 带鼠标滑动效果的table样式看起来比较清爽 样式 <he ...
- HTML表单样式
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
- BootStrap入门教程 (二) :BASE CSS(排版(Typography),表格(Table),表单(Forms),按钮(Buttons))
上讲回顾:Bootstrap的手脚架(Scaffolding)提供了固定(fixed)和流式(fluid)两种布局,它同时建立了一个宽达940px和12列的格网系统. 基于手脚架(Scaffoldin ...
- html5 表单样式 表单验证1 2 3
html5 表单样式 ie9以下不支持 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- div仿checkbox表单样式美化及功能
div仿checkbox表单样式美化及功能(checkbox的样式不好看)素材在底部: 效果图: window.css .bj { position: absolute; top: 0; left: ...
- No.14 selenium for python table表单
table表单,HTML中的特征 标识性标签:table.tr.th.td 定位使用Xpath定位 点击表格中的元素即可
- table表单制作个人简历
应用table表单,编程个人简历表单,同时运用了跨行rowspan和跨列colspan. <!DOCTYPE html> <html> <head> <met ...
- 01 UIPath抓取网页数据并导出Excel(非Table表单)
上次转载了一篇<UIPath抓取网页数据并导出Excel>的文章,因为那个导出的是table标签中的数据,所以相对比较简单.现实的网页中,有许多不是通过table标签展示的,那又该如何处理 ...
- CSS_简介/语法结构/长度单位/应用方式/标签的样式重置/表单样式重置
一.CSS简介: w3c(World Wide Web Consortium):万维网联盟,是规定网页标准的一个组织(叫做Web标准) Web标准:是由w3c和其他标准化组织制定的一系列标准的集合, ...
随机推荐
- Angularjs-项目搭建
开发工具采用WebStorm,没破解,使用了过期策略:安装之后不着急打开程序,先设置系统日期为未来的某个日期,比如2020年.然后再打开程序,试用.然后再改回来系统日期.虽然每次打开WebStorm都 ...
- seL4环境配置
转载声明:希望大家能够从这里收获知识之外,也能够体会到博主撰写博客的辛苦.个人博客势单力薄,对于强转甚至转载博客访问量高于原文的例子不在少数. 希望能够得到大家关注的同时,也能够稍微体谅一下博主的 ...
- 记录一次Quartz2D学习(四)
(三)内主要讲了图片与文字的绘制 本次主要讲解 绘制状态的保存与恢复,以及对它的使用 4.绘制状态 4.1 绘制状态的保存与恢复,以及对它的应用 TIP:通过对保存恢复绘制状以及多次的渲染,可以绘制出 ...
- 我的2013 Q.E.D
"旧历的年底毕竟最像年底,村镇上不必说,就在天空中也显出将到新年的气象来.灰白色的沉重的晚云中间时时发出闪光,接着一声钝响,是送灶的爆竹:近处燃放的可就更强烈了,震耳的大音还没有息,空气里已 ...
- iOS系列 基础篇 07 Action动作和输出口
iOS系列 基础篇 07 Action动作和输出口 目录: 1. 前言及案例说明 2. 什么是动作? 3. 什么是输出口? 4. 实战 5. 结尾 1. 前言及案例说明 上篇内容我们学习了标签和按钮 ...
- Linux下ps命令详解 Linux下ps命令的详细使用方法
http://www.jb51.net/LINUXjishu/56578.html Linux下的ps命令比较常用 Linux下ps命令详解Linux上进程有5种状态:1. 运行(正在运行或在运行队列 ...
- shell——awk
awk -F"分隔符" "command" filename awk -F":" '{print $1}' /etc/passwd 字段引用 ...
- RHEL6和RHEL7恢复root用户密码
一.RHEL6恢复root密码 将系统重启,出现如下界面按上下键选择会停住,并输入e键 选中下图红框选项,再输入e键 再输入1,进入单用户模式 输入b进行启动 修改密码,然后重启 二.RHEL7恢 ...
- css3
CSS3的换行 如果某个单词太长,不适合在一个区域内,它扩展到外面: 自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字: 允许长文本换行: p {word-wrap:break-wo ...
- 卷积神经网络(CNN)学习算法之----基于LeNet网络的中文验证码识别
由于公司需要进行了中文验证码的图片识别开发,最近一段时间刚忙完上线,好不容易闲下来就继上篇<基于Windows10 x64+visual Studio2013+Python2.7.12环境下的C ...