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和其他标准化组织制定的一系列标准的集合, ...
随机推荐
- Ionic设置ion-slide-box不启用(不通过$ionicSlideBoxDelegate)
猛地一看这个标题,可能觉得多此一举,直接$ionicSlideBoxDelegate. $getByHandle(handle). enableSlide(false)设置不就行了?是的,按理说就是这 ...
- Java 性能分析工具 , 第 2 部分:Java 内置监控工具
引言 本文为 Java 性能分析工具系列文章第二篇,第一篇:操作系统工具.在本文中将介绍如何使用 Java 内置监控工具更加深入的了解 Java 应用程序和 JVM 本身.在 JDK 中有许多内置的工 ...
- C#初步应用
首先,此次编程是第一次尝试结对编程,我的结对对象博客园地址:http://www.cnblogs.com/cbb111/ 他的源代码链接:https://coding.net/u/cao1417146 ...
- JAVA NIO Socket通道
DatagramChannel和SocketChannel都实现定义读写功能,ServerSocketChannel不实现,只负责监听传入的连接,并建立新的SocketChannel,本身不传输数 ...
- MySQL 处理重复数据
有些 MySQL 数据表中可能存在重复的记录,有些情况我们允许重复数据的存在,但有时候我们也需要删除这些重复的数据. 本博文我们将为大家介绍如何防止数据表出现重复数据及如何删除数据表中的重复数据. 防 ...
- mysql的缓冲查询和非缓冲查询
最近在开发一个PHP程序时遇到了下面的错误: PHP Fatal error: Allowed memory size of 268 435 456 bytes exhausted 错误信息显示允许的 ...
- 网络IO之阻塞、非阻塞、同步、异步总结
网络IO之阻塞.非阻塞.同步.异步总结 1.前言 在网络编程中,阻塞.非阻塞.同步.异步经常被提到.unix网络编程第一卷第六章专门讨论五种不同的IO模型,Stevens讲的非常详细,我记得去年看第一 ...
- JavaScript代码段整理笔记系列(二)
上篇介绍了15个常用代码段,本篇将把剩余的15个补齐,希望对大家有所帮助!!! 16.检测Shift.Alt.Ctrl键: event.shiftKey; //检测Shift event.altKey ...
- app开发项目简单的结构一
一 .Network (网络) 1. 接口类(可以一个放所有接口的头文件)ApiConfig.h. (1). 可以放服务器的地址.图片服务器的地址及其它接口的地址(这样做的好处是只用导入一个头文件即可 ...
- [LeetCode] Expression Add Operators 表达式增加操作符
Given a string that contains only digits 0-9 and a target value, return all possibilities to add ope ...