时间戳

首页 > 解决方案 > 如何为 HTML 表格中的每一列设置不同的宽度？

html - 如何为 HTML 表格中的每一列设置不同的宽度？

问题描述

我有一个水平可滚动的 HTML 表格。我想为每一列设置不同的宽度。我尝试了宽度的内联样式。我试过<th>'s oldwidth属性。但没有什么对我有用。我不知道我在哪里做错了。请注意，我不想更改我的 HTML 结构和特定于滚动的此布局的 CSS。

这是我的代码：

#tb_wrapper {
  border: 1px solid #cccccc;
  max-width: 960px;
  margin: 50px auto;
  padding: 10px;
}

.tb_responsive {
  overflow-x: auto;
  overflow-y: hidden;
}

.tb_records {
  border-collapse: collapse;
  text-align: center;
  width: 100%;
}

.tb_records th {
  background-color: #5F5F5F;
  color: #FFFFFF;
  font-weight: bold;
}

.tb_records th,
.tb_records td {
  padding: 10px;
  border: 1px solid #000000;
  font-size: 15px;
  white-space: nowrap;
}

.tb_records tr:nth-child(even) {
  background-color: #F2F2F2;
}

.tb_records tr:hover {
  background-color: #F5F5F5;
}
<div id="tb_wrapper">
  <div class="tb_responsive">
    <table class="tb_records">
      <tr>
        <th>Post ID</th>
        <th>Post Name</th>
        <th>Post URL</th>
        <th style="width:200px;">Post Title</th>
        <th width="300">Post Heading</th>
        <th>Post Content</th>
        <th>Post Date Published</th>
        <th>Post Date Modified</th>
        <th>Post Image</th>
        <th>Post Views</th>
      </tr>
      <tr>
        <td>1</td>
        <td>My Post</td>
        <td>my-post</td>
        <td>My Post</td>
        <td>My Post</td>
        <td>Lorem ipsum dolor sit amet.</td>
        <td>2017-07-21 13:58:16</td>
        <td>2019-07-30 22:38:36</td>
        <td>my-post.jpg</td>
        <td>7</td>
      </tr>
      <tr>
        <td>2</td>
        <td>My Post</td>
        <td>my-post</td>
        <td>My Post</td>
        <td>My Post</td>
        <td>Lorem ipsum dolor sit amet.</td>
        <td>2017-07-21 13:58:16</td>
        <td>2019-07-30 22:38:36</td>
        <td>my-post.jpg</td>
        <td>7</td>
      </tr>
      <tr>
        <td>3</td>
        <td>My Post</td>
        <td>my-post</td>
        <td>My Post</td>
        <td>My Post</td>
        <td>Lorem ipsum dolor sit amet.</td>
        <td>2017-07-21 13:58:16</td>
        <td>2019-07-30 22:38:36</td>
        <td>my-post.jpg</td>
        <td>7</td>
      </tr>
      <tr>
        <td>4</td>
        <td>My Post</td>
        <td>my-post</td>
        <td>My Post</td>
        <td>My Post</td>
        <td>Lorem ipsum dolor sit amet.</td>
        <td>2017-07-21 13:58:16</td>
        <td>2019-07-30 22:38:36</td>
        <td>my-post.jpg</td>
        <td>7</td>
      </tr>
      <tr>
        <td>5</td>
        <td>My Post</td>
        <td>my-post</td>
        <td>My Post</td>
        <td>My Post</td>
        <td>Lorem ipsum dolor sit amet.</td>
        <td>2017-07-21 13:58:16</td>
        <td>2019-07-30 22:38:36</td>
        <td>my-post.jpg</td>
        <td>7</td>
      </tr>
      <tr>
        <td>6</td>
        <td>My Post</td>
        <td>my-post</td>
        <td>My Post</td>
        <td>My Post</td>
        <td>Lorem ipsum dolor sit amet.</td>
        <td>2017-07-21 13:58:16</td>
        <td>2019-07-30 22:38:36</td>
        <td>my-post.jpg</td>
        <td>7</td>
      </tr>
      <tr>
        <td>7</td>
        <td>My Post</td>
        <td>my-post</td>
        <td>My Post</td>
        <td>My Post</td>
        <td>Lorem ipsum dolor sit amet.</td>
        <td>2017-07-21 13:58:16</td>
        <td>2019-07-30 22:38:36</td>
        <td>my-post.jpg</td>
        <td>7</td>
      </tr>
      <tr>
        <td>8</td>
        <td>My Post</td>
        <td>my-post</td>
        <td>My Post</td>
        <td>My Post</td>
        <td>Lorem ipsum dolor sit amet.</td>
        <td>2017-07-21 13:58:16</td>
        <td>2019-07-30 22:38:36</td>
        <td>my-post.jpg</td>
        <td>7</td>
      </tr>
      <tr>
        <td>9</td>
        <td>My Post</td>
        <td>my-post</td>
        <td>My Post</td>
        <td>My Post</td>
        <td>Lorem ipsum dolor sit amet.</td>
        <td>2017-07-21 13:58:16</td>
        <td>2019-07-30 22:38:36</td>
        <td>my-post.jpg</td>
        <td>7</td>
      </tr>
      <tr>
        <td>10</td>
        <td>My Post</td>
        <td>my-post</td>
        <td>My Post</td>
        <td>My Post</td>
        <td>Lorem ipsum dolor sit amet.</td>
        <td>2017-07-21 13:58:16</td>
        <td>2019-07-30 22:38:36</td>
        <td>my-post.jpg</td>
        <td>7</td>
      </tr>
    </table>
  </div>
</div>

标签： htmlcss

解决方案

您只需向表中添加几个属性。“宽度”和“样式”的工作方式相同。

table{
    table-layout: fixed;
    width: 100%;
    }
<div id="tb_wrapper">
    	<div class="tb_responsive">
            <table class="tb_records">
                <tr>
                    <th>Post ID</th>
                    <th>Post Name</th>
                    <th>Post URL</th>
                    <th style="width:200px;">Post Title</th>
                    <th width="300">Post Heading</th>
                    <th>Post Content</th>
                    <th>Post Date Published</th>
                    <th>Post Date Modified</th>
                    <th>Post Image</th>
                    <th>Post Views</th>
                </tr>
                <tr>
                    <td>1</td>
                    <td>My Post</td>
                    <td>my-post</td>
                    <td style="width:200px;">My Post</td>
                    <td width="300">My Post</td>
                    <td>Lorem ipsum dolor sit amet.</td>
                    <td>2017-07-21 13:58:16</td>
                    <td>2019-07-30 22:38:36</td>
                    <td>my-post.jpg</td>
                    <td>7</td>
                </tr>
                
            </table>
        </div>
    </div>

推荐阅读