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中即可。

  • 相关阅读:
    lvs+keepalive安裝部署文檔
    北邮 -3.29
    第一章
    CG-CTF 部分
    bugku部分
    1062 Talent and Virtue (25分)(水)
    1061 Dating (20分)
    1060 Are They Equal (25分)
    素数筛选
    1059 Prime Factors (25分)
  • 原文地址:https://www.cnblogs.com/DennyZhao/p/8559136.html
Copyright © 2011-2022 走看看