Question

嗨，我是html的新手，我很难在表中创建均匀的列宽，我尝试了几种方法来修改宽度，包括将td和th值设置为50％，但是留下了很大的空白在右边。任何关于我犯错地方的指针将不胜感激！非常感谢！

以下代码段：

/*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;
}

.contenttbl  td,th {
  text-align:center;
  vertical-align:center; 
  border: 1px solid #ddd;
  padding:5px;
  margin-left:auto;
  margin-right:auto;
  width:100%;
}

.contenttbl th{
   background-color:#ee3124 ;
   color:white;
}
tr:hover {background-color: #f2f2f2;}

<div class="conent">
  <div 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 2</td>
          <td>row 2 column 2</td>
        </tr>
        <tr>
          <td>row 3 column 2</td>
          <td>row 3 column 2</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Answer 1

我为width:100%添加了table，为width:50%，td添加了th

/*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;
}

table {
  width:100%;
}

.contenttbl  td,th {
  text-align:center;
  vertical-align:center; 
  border: 1px solid #ddd;
  padding:5px;
  margin-left:auto;
  margin-right:auto;
  width:50%;
}

.contenttbl th{
   background-color:#ee3124 ;
   color:white;
}
tr:hover {background-color: #f2f2f2;}

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/CSS" href="#">
</head>
<body>
    <!--content-->
    <div class="conent">
        <div 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 2</td>
                        <td>row 2 column 2</td>
                    </tr>
                    <tr>
                        <td>row 3 column 2</td>
                        <td>row 3 column 2</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>

Answer 2

您的代码无法正常工作的原因是您在html代码上有错字。

您的CSS也可以作为此示例进行修剪。

此外，Codepen是概述的重要资产。 https://codepen.io/anon/pen/XwvLbv

/*page content container*/
.content{
  position:relative;
  overflow: hidden;
  background-color:#424242;
  width:100%;
}


/*contents tables formating*/
.contenttbl {
  border:1px solid black;
}

table {
  width:100%;
}

.contenttbl  td,th {
  text-align:center;
  border: 1px solid #ddd;
  padding:5px;
  width:50%;
}

.contenttbl th{
   background-color:#ee3124;
   color:white;
}
tr:hover {background-color: #f2f2f2;}

<!--content-->
<div class="content">
  <div 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 2</td>
          <td>row 2 column 2</td>
        </tr>
        <tr>
          <td>row 3 column 2</td>
          <td>row 3 column 2</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

答案 2 :(得分：0)

我刚刚在您的.css中添加了以下内容：

.contenttbl table {
   width: 100%;
}

无需强制将td设置为特定宽度，这将适用于所有.contenttbl表，无论您在表中放置多少列。而且只会影响.contenttbl表，而不影响网站上的所有表。

答案 3 :(得分：0)

从td中删除with，这样您的单元格样式将是

.contenttbl  td,th {
  text-align:center;
  vertical-align:center; 
  border: 1px solid #ddd;
  padding:5px;
  margin-left:auto;
  margin-right:auto;
}

添加以下内容

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

Answer 3

我刚刚在您的.css中添加了以下内容：

.contenttbl table {
   width: 100%;
}

无需强制将td设置为特定宽度，这将适用于所有.contenttbl表，无论您在表中放置多少列。而且只会影响.contenttbl表，而不影响网站上的所有表。

Answer 4

从td中删除with，这样您的单元格样式将是

.contenttbl  td,th {
  text-align:center;
  vertical-align:center; 
  border: 1px solid #ddd;
  padding:5px;
  margin-left:auto;
  margin-right:auto;
}

添加以下内容

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

CSS表列宽度不均匀

4 个答案: