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. JS网页顶部进度条demo

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  2. Linux服务器管理: 系统的进程管理终止进程kill命令

    在Linux中如何用kill终止进程: kill -l [root@localhost~]#kill -l   可以看到kill中有很多的 常用:  -1 是重启一个进程    -9 是强制杀死进程 ...

  3. hdu4982 Goffi and Squary Partition （DFS解法）

    BestCoder Round #6 B http://acm.hdu.edu.cn/showproblem.php?pid=4982 Goffi and Squary Partition Time ...

  4. systemd

    本文参照:https://wiki.archlinux.org/index.php/Systemd#Basic_systemctl_usage 做了翻译和整理 systemd是Linux下的一种ini ...

  5. 如何获取客户端MAC地址(三个方法)

    方法一: 调用Windows的DOS命令,从输出结果中读取MAC地址: public static String getMACAddress() { String address = "&q ...

  6. 开始使用 Markdown

    (Xee:我最近感觉nyfedit打开有点慢,数据库有点大,试想着用一些其他的方式记录一下学习的过程,才想起了遗忘了很长时间的Markdown,将其分类在HTML下,也是我原本意愿的...) 本文面向 ...

  7. HDOJ 1561 The more, The Better

    树形DP.... The more, The Better Time Limit: 6000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K ...

  8. PYTHONPATH 可以跨版本 方便使用 （本文为windows方法）转~

    PYTHONPATH是Python搜索路径,默认我们import的模块都会从PYTHONPATH里面寻找. 使用下面的代码可以打印PYTHONPATH: print(os.sys.path) 我的某个 ...

  9. 基于jQuery的对象切换插件：soChange 1.5 (点击下载)

    http://www.jsfoot.com/jquery/demo/2011-09-20/192.html 所有参数: $(obj).soChange({     thumbObj:null, //导 ...

  10. JAVA设计模式 之 策略模式

    一. 定义 设计模式定义了算法族,分别封装起来,让他们之间可以互相替代,此模式让算法的变化独立于使用算法的客户(该定义来自于Head First 设计模式). 二. 应用场景 当我们在应用程序中完成一 ...