zoukankan      html  css  js  c++  java
  • table边框和td的width失效

    table元素有一个属性border,可设置table的边框。这个边框对内部元素有效。

    不同于style:border,这个仅仅是外边框。

    table{
        60%;
        border-collapse:collapse;
        border:3px solid red;
    }
    <div class="container">
        <table border="1">
            <tr><td>1</td><td>2</td></tr>
            <tr><td>3</td><td>4</td></tr>
        </table>
    </div>

     以下为结果:

     

    这种直接设置border限制了整体table的样式,无法灵活的对部分td设置不同样式。

    table{
        60%;
        border-collapse:collapse;
    }
    table td{
        border: 1px solid green;
    }
    .blue{
        border-color: blue !important;
    }
    <div class="container">
        <table >
            <tr><td>1</td><td>2</td></tr>
            <tr><td>3</td><td class="blue">4</td></tr>
        </table>
    </div>

     ------------------------------------------

    width无效问题:

    table-layout默认的布局是auto;根据内容会自动往外撑开。

    只有设置为table-layout:fixed;才可以固定页面的宽度,但应用较少。

    要想对个别列采用固定宽度,可将内容放在一个div中,将div设置width,放入到td中即可。

  • 相关阅读:
    数据库函数
    数据库查询习题整理(二)
    数据库查询习题整理(一)
    1202数据库查询
    1201新课程TSQL语句
    1123项目第五天
    1121项目第四天
    1120项目第三天
    14
    にちかん
  • 原文地址:https://www.cnblogs.com/DennyZhao/p/8559136.html
Copyright © 2011-2022 走看看