html - 使 <td> 的宽度响应外部 <div> 的宽度

Question

我在 div 中有一个表格，我正在尝试设置宽度，以便输出中的列用左边的 id 填充整个 div。

这是所有代码以及 jsfiddle:https://jsfiddle.net/qsogubjd/

#sortPanel {
    width: 565px;
    height: 165px;
    margin: 10px 15px;
    display: block;
    border: 0px solid #fff;
}

#sortPanel td {
    height: 165px;
    width: 11px;
    overflow: hidden;
    display: inline-block;
    white-space: nowrap;
    padding: 0;
    position: relative;
}

.cc {
    display: block;
    width: 5px;
    position: absolute;
    bottom: 0px;
    background-color: #999;
    border-top: 4px solid #fff;
    margin: 0px;
    margin-top: 4px;
}

.ccH1 {
    display: block;
    width: 5px;
    background-color: #F22613;
    margin: 0px;
    position: absolute;
    bottom: 0px;
}

.ccH2 {
    display: block;
    width: 5px;
    background-color: #F2B705;
    margin: 0px;
    position: absolute;
    bottom: 0px;
}


#left {
    width: 590px;
    height: 190px;
    margin: 10px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0 1px 3px #000;
    -moz-box-shadow: 0 1px 3px #000;
    border-top: 1px solid #555;
    box-shadow: 0 1px 3px #000;
    background: -webkit-linear-gradient(#444, #333);
    background: -moz-linear-gradient(#444, #333);
    background: -o-linear-gradient(#444, #333);
    background: -ms-linear-gradient(#444, #333);
    background: linear-gradient(#444, #333);
    position: relative;
    float: left;
}

<div id="left">
  <table id="sortPanel">
    <tr>
      <td id="b0">
        <div class="cc" style="height: 144px;"></div>
      </td>
      <td id="b1">
        <div class="cc" style="height: 35px;"></div>
      </td>
      <td id="b2">
        <div class="cc" style="height: 6px;"></div>
      </td>
      <td id="b3">
        <div class="cc" style="height: 64px;"></div>
      </td>
      <td id="b4">
        <div class="cc" style="height: 12px;"></div>
      </td>
      <td id="b5">
        <div class="cc" style="height: 153px;"></div>
      </td>
      <td id="b6">
        <div class="cc" style="height: 70px;"></div>
      </td>
      <td id="b7">
        <div class="cc" style="height: 137px;"></div>
      </td>
      <td id="b8">
        <div class="cc" style="height: 19px;"></div>
      </td>
      <td id="b9">
        <div class="cc" style="height: 131px;"></div>
      </td>
     
    </tr>
  </table>
</div>

到目前为止，我尝试将 position: relative; 放在选择器上，但没有成功。然后我试了display: block;，也没用。

为了更容易阅读代码:

td 的width 属性定义了 html 输出中列之间的分隔。增加 width 的值将为彼此进一步设置列，从而展开它们。

虽然 td 中 div 的 width 设置列本身的宽度。增加此值将使列更厚。

据我研究，解决方案应包括 %:width: someValue%。

我如何更改 css 代码，以便在 id 为“left”的 div 中扩展列并使整个表格响应？

Answer 1

以下原因导致了问题:

1. table#sortPanel 有一个 display: block;
2. td.cc 有一个 display: block;
3. 表格有定义的宽度 (565px)
4. td 具有定义的宽度 (5px)

td 自然扩展以占据表格的整个宽度，而不需要任何 css。 当 td 被赋予 display: block 时，他们失去了这个自然属性。

只需删除这些样式，td 就会占据整个表格。 给表格一个宽度:100%，它将占据 div#left 的整个范围。

这是您修改后的代码:

    <div id="left">
    <table id="sortPanel">
        <tr>
            <td id="b0">
                <div class="cc" style="height: 144px;"></div>
            </td>
            <td id="b1">
                <div class="cc" style="height: 35px;"></div>
            </td>
            <td id="b2">
                <div class="cc" style="height: 6px;"></div>
            </td>
            <td id="b3">
                <div class="cc" style="height: 64px;"></div>
            </td>
            <td id="b4">
                <div class="cc" style="height: 12px;"></div>
            </td>
            <td id="b5">
                <div class="cc" style="height: 153px;"></div>
            </td>
            <td id="b6">
                <div class="cc" style="height: 70px;"></div>
            </td>
            <td id="b7">
                <div class="cc" style="height: 137px;"></div>
            </td>
            <td id="b8">
                <div class="cc" style="height: 19px;"></div>
            </td>
            <td id="b9">
                <div class="cc" style="height: 131px;"></div>
            </td>

        </tr>
    </table>
</div>

    #sortPanel {
    //width: 565px;
    width: 100%;
    height: 165px;
    margin: 10px 0x;
    //display: block;
    display: table;
    border: 0px solid #fff;
}

#sortPanel td {
    height: 165px;
    //width: 11px;
    overflow: hidden;
    //display: inline-block;
    white-space: nowrap;
    padding: 0;
    position: relative;
    vertical-align: bottom;
}

.cc {
    display: block;
    //width: 5px;
    width: 100%;
    //position: absolute;
    bottom: 0px;
    background-color: #999;
    border-top: 4px solid #fff;
    margin: 0px;
    margin-top: 4px;
}

.ccH1 {
    display: block;
    width: 5px;
    background-color: #F22613;
    margin: 0px;
    position: absolute;
    bottom: 0px;
}

.ccH2 {
    display: block;
    width: 5px;
    background-color: #F2B705;
    margin: 0px;
    position: absolute;
    bottom: 0px;
}

#left {
    width: 590px;
    //height: 190px;
    margin: 10px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0 1px 3px #000;
    -moz-box-shadow: 0 1px 3px #000;
    border-top: 1px solid #555;
    box-shadow: 0 1px 3px #000;
    background: -webkit-linear-gradient(#444, #333);
    background: -moz-linear-gradient(#444, #333);
    background: -o-linear-gradient(#444, #333);
    background: -ms-linear-gradient(#444, #333);
    background: linear-gradient(#444, #333);
    position: relative;
    float: left;
}

https://jsfiddle.net/cpr4ztvj/