Question

在更改嵌套表中的宽度时遇到麻烦。

<table width="80%" id="parent">
<tbody>
     <tr>
         <th>
             <table id="samples">
                 <tbody>
                 <tr><th>sample_path_01</th> <th> tagging </th></tr>
                 <tr><th>sample_path_01</th> <th> tagging </th></tr>
                 <tr><th>sample_path_01</th> <th> tagging </th></tr>
                 <tr><th>sample_path_01</th> <th> tagging </th></tr>
                 <tr><th>sample_path_01</th> <th> tagging </th></tr>
                 <tr><th>sample_path_01</th> <th> tagging </th></tr>
                 <tr><th>sample_path_01</th> <th> tagging </th></tr>
                 <tr><th>sample_path_01</th> <th> tagging </th></tr>
                 <tr><th>sample_path_01</th> <th> tagging </th></tr>
                 <tr><th>sample_path_01</th> <th> tagging </th></tr>
                 <tr><th>sample_path_01</th> <th> tagging </th></tr>
                 <tr><th>sample_path_01</th> <th> tagging </th></tr>
                 <tr><th>sample_path_01</th> <th> tagging </th></tr>
                 </tbody>
             </table>
         </th>
         <th>
             Screenshot
         </th>
     </tr>
 </tbody>

我想让samples的广泛宽度与th中的第一个parent一样宽，但我不能这样做。

我使用CSS设置width参数，完整代码为：

jsfiddle.net

Answer 1

我不确切地知道你想要达到的结果，但是这样的事情会更好，更简单吗？

有一个小提琴！ - Fiddle link!

HTML

<div id="samplesParent">
    <table id="samples">
        <tbody>
            <tr>
                <td>sample_path_01</td>
                <td>tagging</td>
            </tr>
    <!-- to infinity -->
        </tbody>
    </table>
</div>
<div>Screenshot</div>

CSS

#samplesParent {
    float: left;
    width: 300px;
    height: 200px;
    overflow-y: scroll;
}

#samples {
    width: 100%;
}

Answer 2

这是一个FIDDLE来考虑div中的所有内容。

HTML

<div id='holderdiv'>
  <div id='scrolldiv'>
    <div class='leftdiv'>sample_path_01</div><div class='rightdiv'>tagging</div>
    <div class='leftdiv'>sample_path_01</div><div class='rightdiv'>tagging</div>
    <div class='leftdiv'>sample_path_01</div><div class='rightdiv'>tagging</div>
    <div class='leftdiv'>sample_path_01</div><div class='rightdiv'>tagging</div>
    <div class='leftdiv'>sample_path_01</div><div class='rightdiv'>tagging</div>
    <div class='leftdiv'>sample_path_01</div><div class='rightdiv'>tagging</div>
    <div class='leftdiv'>sample_path_01</div><div class='rightdiv'>tagging</div>
    <div class='leftdiv'>sample_path_01</div><div class='rightdiv'>tagging</div>
    <div class='leftdiv'>sample_path_01</div><div class='rightdiv'>tagging</div>
    <div class='leftdiv'>sample_path_01</div><div class='rightdiv'>tagging</div>
    <div class='leftdiv'>sample_path_01</div><div class='rightdiv'>tagging</div>
    <div class='leftdiv'>sample_path_01</div><div class='rightdiv'>tagging</div>
  </div>
  <div id='screendiv'>Screenshot</div>
  </div>
</div>

嵌套表宽度不可更改

2 个答案: