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. JavaScript 五种(构造方式)继承

    一.对象冒充 function Parent(username){ this.username = username; this.hello = function(){ alert(this.user ...

  2. iOS- storyboard this class is not key value coding-compliant for the key xxx

    如图: 在使用storyboard的时候出现此问题,主要是因为给storybroad中的view拖线的时候,有时不小心线拖错了,或者再次拖线导致代码中控件的名字与之前拖线时定义的名字不同导致的. 解决 ...

  3. iOS-开启arc之后 NSNotificationCenter removeObserver 是否需要调用

    开启ARC之后,NSNotificationCenter removeObserver 是否需要调用,在何时调用? 今天在stackoverflow上面看到一个问题,arc情况下是否需要调用remov ...

  4. 要让div中的float不会自动显示到下一行来?

    使用 高度 + hidden: 要尝试 恰当的 高度, 设置合适的 div的 height: ... 要让 float的 "最直接的" "亲生的 " " ...

  5. regsvr32的使用

    注册器是: DllRegisterServer 命令就是: regsvr32 不是regsrv32.

  6. PHP利用Curl实现多线程抓取网页和下载文件

    PHP 利用 Curl  可以完成各种传送文件操作,比如模拟浏览器发送GET,POST请求等等,然而因为php语言本身不支持多线程,所以开发爬虫程序效率并不高,一般采集 数据可以利用 PHPquery ...

  7. js 判断鼠标滚轮方向

    最近因为公司项目的要求,需要做页面的全屏滚动切换效果. 页面的切换,需要脚本监听鼠标滑轮的滚动事件,来判断页面是向上切换or向下切换. 这里的脚本很简单,我就直接贴出来吧. $('html').on( ...

  8. winServer2003除默认端口外的其他端口只能本地访问，关闭防火墙即可

    winServer2003除默认端口外的其他端口只能本地访问,关闭防火墙即可

  9. Linux/CentOS配置：使用yum update更新时不升级内核的方法

    RedHat/CentOS/Fedora使用 yum update 更新时,默认会升级内核.但有些服务器硬件(特别是组装的机器)在升级内核后,新的内核可能会认不出某些硬件,要重新安装驱动,很麻烦.所以 ...

  10. IOS学习目录

    一.UI 1.基础控件 2.高级控件 二.多线程网络 1.网络请求.网络安全 2.