使宽度响应外部<div>的宽度

Question

我在html内有一个表格，我正在尝试设置宽度，以便输出上的列填充整个div，ID为。

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

＆＃13;

＆＃13;

div

＆＃13;

#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;
}

＆＃13;

＆＃13;

＆＃13;

到目前为止，我尝试将<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;的{​​{1}}属性定义了html输出中列之间的分隔。增加width的值会使列彼此进一步扩展，扩散它们。

td内的width width设置了列本身的宽度。增加此值将使colums更厚。

据我研究，解决方案应包括％：div。

如何更改css代码，以便在div中使用id＆＃34; left＆＃34;来跨越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/

Answer 2

您必须删除一些与display和position特别相关的不必要的属性值对，这些在css中非常重要，请务必阅读它们。我在css代码的注释中添加了更改，并且我将分享小提琴链接以检查响应性https://jsfiddle.net/nukjh6ea/，现在您可以根据需要添加td。

＆＃13;

＆＃13;

#sortPanelA, sortPanelB {
  width: 100%;/* occupy the whole width of div left */
  height: 165px;
  margin: 10px 15px;
  border: 0px solid #fff;
}

#sortPanelA td, sortPanelB td {
  height: 165px;
  overflow: hidden;
  white-space: nowrap;
  padding: 0;
  position: relative;
}

.cc {
  display: block;
  width: 50%;/* the width of column, you may play around with it */
  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: 90%;/* take up the 90% of body */
  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;
}

＆＃13;

<div id="left">
  <table id="sortPanelA">
    <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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

更改.cc {width: 100%}和#sortPanelA td {width: 3.5rem}

修改

要使整个表格响应，请执行以下步骤：

• 将div，table和tbody width更改为100％
• 设置表display: table
• 删除td宽度
• 将div.cc设为100％
• 设置，而不是使用css

以下是小提琴中的代码：https://jsfiddle.net/meshin/uuL2f43g/

Answer 4

您可以在不了解其功能的情况下混合和匹配不同的块模型。默认情况下，表块模型非常敏感，并且可以通过添加块和内联块来解决问题。

从表格元素中删除所有display: block和display: inline-block。然后将.cc div设置为表格单元格的100％宽度。然后你的桌子将扩展到你需要的任何东西。如果你想要100％将表格设置为100％。

参见示例： https://jsfiddle.net/mede6n8j/

要修复的步骤：

• 从display: block;

中移除#sortPanelA, sortPanelB

• 从display: block

删除display:inline-block;和#sortPanelA td, sortPanelB td
• 从width: 11px;
移除#sortPanelA td, sortPanelB td
• 将width: 5px;更改为width: 100%上的.cc。这将使div扩展到table-cells

Answer 5

我建议你首先尝试将表格宽度设为100％，它应该有效。

如果它不起作用，那么因为你有9个td连续尝试将td设置为11.11％。但是，如果你有n个td那么它将无法工作。

此致 Vinit Patil。