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. clearfix--清除浮动

    .clearfix { zoom: ; display: table; width: %; } .clearfix:after { content: " "; display: b ...

  2. 大数据架构师NoSQL建模技术

    从数据建模的角度对NoSQL家族系统做了比较简单的比较,并简要介绍几种常见建模技术. 1.前言 为了适应大数据应用场景的要求,Hadoop以及NoSQL等与传统企业平台完全不同的新兴架构迅速地崛起.而 ...

  3. regsvr32的使用

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

  4. 在hexo静态博客中利用d3-cloud来展现标签云

    效果: http://lucyhao.com/tags/ hexo自带的tag cloud的标签展现不太美观,想能够展现出“云”效果的标签.在网上找到了d3-cloud这个项目,github地址:ht ...

  5. VTK初学一，a_Vertex图形点的绘制

    系统:Win8.1 QT版本:2.4.2,Mingw VTK版本:6.3 2. main.cpp #ifndef INITIAL_OPENGL #define INITIAL_OPENGL #incl ...

  6. 【Bootstrap】Bootstrap和Java分页-第一篇

    目录 关于此文 pagination BetweenIndex DefaultPagination QueryHandler BookDaoImpl BookServiceImpl BookActio ...

  7. 清北暑假模拟day2 将

    /* 爆搜,正解弃坑 */ #include<iostream> #include<cstdio> #include<string> #include<cst ...

  8. js操作json与字符串相互转换

    字符串转对象(strJSON代表json字符串) var obj = eval(strJSON); var obj = strJSON.parseJSON(); var obj = JSON.pars ...

  9. Magic Number（Levenshtein distance算法）

    Magic Number Time Limit:1000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u Submit ...

  10. 在Xcode6.4中使用OpenCV

    XCode版本6.4,OpenCV版本3.0.0 昨天我安装完OpenCV之后,兴奋地按照这篇文章Mac平台上OpenCV开发环境搭建的步骤,在XCode上建了一个Demo工程,结果编译一直不成功.一 ...