嵌套表的宽度不可更改答案

【问题标题】：Nested table's wide is not changeable嵌套表的宽度不可更改
【发布时间】：2014-02-21 12:34:39
【问题描述】：

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

<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 的宽度与 parent 中的第一个 th 一样宽，但我做不到。

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

jsfiddle.net

【问题讨论】：

王尔德是什么意思？你是说宽度吗？
抱歉误会，这里是width。我编辑了原始帖子。
你真的需要嵌套表吗？
id="parent" 在您的 jsfiddle 代码中拼写错误（不是解决方案，只是指出这一点）
@misterManSam 我想让左侧单元格可滚动，嵌套表格是我知道完成此任务的唯一方法。

标签： html css

【解决方案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%;
}

【讨论】：

使用<div> 是解决我问题的绝妙方法，谢谢。

【解决方案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>

【讨论】：