CSS表格列宽不均问题求助：设置50%后右侧留白如何解决？

嘿，我来帮你捋捋问题出在哪～你的代码里有几个小细节出错了，导致列宽不均还出现右侧空白，咱们一步步修正：

问题拆解 #

1. 类名拼写错误：你把容器的类名.content写成了<div class="conent">，这直接导致容器的背景、宽高样式根本没生效；
2. 表格样式绑定错误：你把contenttbl类加在了包裹table的div上，而不是直接给table本身，表格的边框、对齐等样式自然没正确应用；
3. 宽度设置逻辑错误：给td和th设width:100%意味着每个单元格都要占满父容器宽度，两个单元格这么设置肯定会乱套；
4. 属性拼写错误：vertical-align:center是无效写法，正确的垂直居中属性值是middle；
5. 表格未设置宽度：表格本身没指定宽度，只会根据内容自适应，不会填满容器空间。

修正后的完整代码 #

<style>
/*page content container*/
.content{ 
  position:relative; 
  overflow: hidden; 
  background-color:#424242; 
  width:100%; 
  height:600px; 
  margin:0; 
  padding:0; 
}
/*contents tables formating*/
.contenttbl { 
  margin-top:10px; 
  margin-bottom:10px; 
  margin-left:auto; 
  margin-right:auto; 
  border-collapse:collapse; 
  border:1px solid black; 
  width: 100%; /* 让表格填满父容器宽度 */
}
.contenttbl td,th { 
  text-align:center; 
  vertical-align:middle; /* 修正垂直居中属性 */
  border: 1px solid #ddd; 
  padding:5px; 
  width:50%; /* 两列各占50%实现均等宽 */
}
.contenttbl th{ 
  background-color:#ee3124 ; 
  color:white; 
}
tr:hover {background-color: #f2f2f2;}
</style>

<div class="content"> <!-- 修正类名拼写错误 -->
  <table class="contenttbl"> <!-- 把样式类直接绑定到table标签上 -->
    <thead>
      <tr>
        <th>title1</th>
        <th>title2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>row 1 column 1</td>
        <td>row 1 column 2</td>
      </tr>
      <tr>
        <td>row 2 column 1</td> <!-- 修正内容笔误 -->
        <td>row 2 column 2</td>
      </tr>
      <tr>
        <td>row 3 column 1</td> <!-- 修正内容笔误 -->
        <td>row 3 column 2</td>
      </tr>
    </tbody>
  </table>
</div>

关键改动说明 #

• 修正容器类名拼写，确保容器样式正常生效；
• 将contenttbl类直接绑定到<table>上，让表格样式正确应用；
• 给表格添加width:100%，使其填满父容器的可用空间；
• 把td和th的宽度设为50%，让两列均等分配宽度；
• 修正vertical-align的属性值，实现单元格内容垂直居中；
• 顺便修正了你tbody里的内容笔误（部分单元格重复写成column2）。

这样调整后，表格的两列就会均匀分布，不会再出现右侧空白啦～

内容的提问来源于stack exchange，提问作者Welshy