2016年1月14日 11:16:54 星期四

效果图:

html:

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

 <style>

 /*-----*/

 </style>

 </head>

 <body>

 <div class="form">

     <form action="" method="post">

         <div class="field">

             <label>嘿嘿:</label>

             <input type="text" name="uid" placeholder="嘿嘿">

         </div>

         <div class="field">

             <label>咻咻:</label>

             <input type="text" name="order_id" placeholder="咻咻">

         </div>

         <div class="field">

             <button type="submit">查询</button>

         </div>

     </form>

 </div>

 <table class="table">

     <caption>Log表</caption>

     <thead>

     <tr>

         <th class="large">嘿嘿</th>

         <th class="medium">咻咻</th>

         <th class="small">啊啊</th>

     </tr>

     </thead>

     <tbody>

         <tr>

             <td>嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿 嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿</td>

             <td>咻咻咻咻咻咻咻咻咻咻咻咻咻咻 咻咻咻咻咻咻咻咻咻咻咻咻咻咻咻咻</td>

             <td>啊啊啊啊啊啊啊啊啊啊啊啊啊啊 啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</td>

         </tr>

         <tr>

             <td>嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿 嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿</td>

             <td>咻咻咻咻咻咻咻咻咻咻咻咻咻咻 咻咻咻咻咻咻咻咻咻咻咻咻咻咻咻咻</td>

             <td>啊啊啊啊啊啊啊啊啊啊啊啊啊啊 啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</td>

         </tr>

         <tr>

             <td>嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿 嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿</td>

             <td>咻咻咻咻咻咻咻咻咻咻咻咻咻咻 咻咻咻咻咻咻咻咻咻咻咻咻咻咻咻咻</td>

             <td>啊啊啊啊啊啊啊啊啊啊啊啊啊啊 啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</td>

         </tr>

     </tbody>

 </table>

 </body>

 </html>

css:

 /*字体样式, 行内块*/

 .form .field {

     font-size: 1em;

     font-family: "Consolas", "Monaco", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;

     display: inline-block;

 }

 /*input框样式*/

 .form .field input[type="text"] {

     height: 2em;

     border: 1px solid lightgrey;

     border-radius: 5px;

     padding-left: 0.2em;

 }

 /*提交按钮*/

 .form .field button {

     width: 5em;

     line-height: 2em;

     text-align: center;

     font-weight: bold;

     border-radius: 5px;

     overflow: hidden;

     border-style: none;

 }

 /*充满屏幕, 边框样式, 去掉表格空隙*/

 .table {

     width: 100%;

     border: 1px solid lightgrey;

     border-collapse: collapse;

 }

 .table caption {

     font-weight: bold;

     margin: 5px;

 }

 .table thead {

     background-color: #F9F9F9;

 }

 /*边框样式, 字符截断(配合width使用)*/

 .table th, .table td {

     border-right: 1px solid lightgrey;

     border-bottom: 1px solid lightgrey;

     word-break: break-all; /*以字母为单位折断*/

     word-wrap: break-word; /*以单词为单位折断*/

 　　white-space: pre-wrap; /*汉字*/

 }

 /*偶数行变色*/

 .table tbody tr:nth-child(even) {

     background-color: #F9F9F9;

 }

 /*用来控制td的宽度*/

 .table .large {

     width: 300px;

 }

 .table .medium {

     width: 200px;

 }

 .table .small {

     width: 100px;

 }

html表单样式, table隔行高亮, 长字符串自动换行的更多相关文章

  1. 还不错的Table样式和form表单样式

    作为一个后台开发人员而言,拥有一套属于自己的前台样式是比较重要的,这里分享一下自己感觉还不错的样式,以后遇到好的,还会陆续添加 上图: 带鼠标滑动效果的table样式看起来比较清爽 样式 <he ...

  2. HTML表单样式

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  3. html5 表单样式 表单验证1 2 3

    html5 表单样式 ie9以下不支持 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  4. div仿checkbox表单样式美化及功能

    div仿checkbox表单样式美化及功能(checkbox的样式不好看)素材在底部: 效果图: window.css .bj { position: absolute; top: 0; left: ...

  5. CSS_简介/语法结构/长度单位/应用方式/标签的样式重置/表单样式重置

    一.CSS简介:  w3c(World Wide Web Consortium):万维网联盟,是规定网页标准的一个组织(叫做Web标准) Web标准:是由w3c和其他标准化组织制定的一系列标准的集合, ...

  6. 自定义表单样式之checkbox和radio

    1,起因 最近在工作中要实现自定义式的radio样式,而我们通常使用的时默认的样式,因为自己实在想不到解决的方法,于是开始搜索,最终看到了不错的解决办法,可以完美解决我们遇到的问题. 2,原理 大家都 ...

  7. yii中调整ActiveForm表单样式

    Yii2中对于表单和字段的支持组件为ActiveForm和ActiveField, <?php $form = ActiveForm::begin([ 'id' => 'login-for ...

  8. 执行相应操作后，将表单及table中数据清空

    使用 ccms.util.clearForm('要清空的表单的id'); $("#table中显示数据部分的id").empty();

  9. element-ui的form表单样式改动

    造成下面样式错乱是下面自带的css样式,原本打算通过样式重写在组件内的style,发现下面相应的元素是出于封装情况的,无论样式重写在组件还是在公共样式均不能很好的解决,因为跳转到该页面时都要刷新一次, ...

随机推荐

  1. servlet request getHeader(“x-forwarded-for”) 获取真实IP

    request方法客户端IP: request.getRemoteAddr() 输出:192.168.0.106 客户端主机名:request.getRemoteHost()输出:abc reques ...

  2. NSOperation GCD 对比 (附NSOperation演练)

    项目中使用NSOperation的优点是NSOperation是对线程的高度抽象,在项目中使用它,会使项目的程序结构更好子类化NSOperation的设计思路,是具有面向对象的优点(复用.封装),使得 ...

  3. List之Union(),Intersect(),Except()

    http://www.cnblogs.com/qinpengming/archive/2012/12/03/2800202.html List之Union(),Intersect(),Except() ...

  4. Myeclipse如何关联源码

    Myeclipse版本:Myeclipse2014 关联源码前要下载对应的源码,如本例的dom4j-1.6.1.jar,则去下载对应的源码dom4j-1.6.1.zip 如果做的是web项目,就要将该 ...

  5. iOS：使用MVC模式帮ViewController瘦身

    如何给UIViewController瘦身 随着程序逻辑复杂度的提高,你是否也发现了App中一些ViewController的代码行数急剧增多,达到了2,3千行,甚至更多.这时如果想再添加一点功能或者 ...

  6. 【Hadoop】HDFS的运行原理

    博文已转移,请借一步说话http://www.weixuehao.com/archives/596 简介 HDFS(Hadoop Distributed File System )Hadoop分布式文 ...

  7. 论在Windows下远程连接Ubuntu

       Ubuntu下1:下载xrdp   sudo apt-get install xrdp 2: urs/share/applications 下找到  远程桌面 设置成这样 Windows下 1; ...

  8. Java之异常处理机制

    来源:深入理解java异常处理机制 2.Java异常    异常指不期而至的各种状况,如:文件找不到.网络连接失败.非法参数等.异常是一个事件,它发生在程序运行期间,干扰了正常的指令流程.Java通 ...

  9. YC大牛的判题任务-想法

    YC大牛的判题任务 Time Limit: 1000ms Memory Limit: 65536KB   64-bit integer IO format: %lld      Java class ...

  10. Android系统截屏的实现（附代码）

    1.背景                     写博客快两年了,写了100+的文章,最火的文章也是大家最关注的就是如何实现android系统截屏.其实我们google android_screen_ ...