相关疑难解决方法(0)

所以我在这里有这个代码:

<table>
    <tr>
        <td width="200px" valign="top">
            <div class="left_menu">
                <div class="menu_item">
                    <a href="#">Home</a>
                </div>
            </div>
        </td>
        <td width="1000px" valign="top">Content</td>
    </tr>
</table>

用CSS

.left_menu {
    background: none repeat scroll 0 0 #333333;
    border-radius: 5px 5px 5px 5px;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
}

.menu_item {
    background: none repeat scroll 0 0 #CCCCCC;
    border-bottom: 1px solid #999999;
    border-radius: 5px 5px 5px 5px;
    border-top: 1px solid #FFFFCC;
    cursor: pointer;
    padding: 5px;
}

它适用于我的浏览器很好,我已经在每个浏览器Mac和PC的测试,但有人抱怨说,td与width200不断变化的宽度.我不知道他在说什么.有谁知道为什么他或她看到宽度变化td？

我想td在tbody其下方设置宽度，该宽度thead具有colspan="2"以％为单位的硬定义列宽。浏览器外壳不会动态调整表格宽度。

.sample {
  width: 100%;
  table-layout: fixed;
}

.sample td:nth-child(1),
.sample th:nth-child(1) {
  width: 30%;
}

.sample td:nth-child(2),
.sample th:nth-child(2) {
  width: 70%;
}

<table class="sample" border="1">
  <thead>
    <tr>
      <th colspan="2">Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>30%</td>
      <td>70%</td>
    </tr>
  </tbody>
</table>

上面的样式如果thead被删除但不起作用。

重要笔记，

• 我添加了table-layout: fixed;因为我需要列的宽度与指定的完全一样。table-layoud: auto;在浏览器中使用结果将指定的宽度作为方向，但仍然动态调整宽度。

编辑

接受的答案解决了我上面的问题。但是我无法使用，colgroup因为我使用的是 WYSIWYG 编辑器。因此，我在这里添加了一个带有详细规格的后续问题。