时间戳

首页 > 解决方案 > 我希望表格单元格宽度为自动。它应该只占用单元格中文本的空间

html - 我希望表格单元格宽度为自动。它应该只占用单元格中文本的空间

问题描述

我试图使每行的单元格大小只占用与文本一样多的空间，并且不想固定每个单元格的宽度。我使用了一个表格组件（React Bootstrap）并隐藏了边框。

到目前为止我的代码：

 <Table responsive bordered>
            <tbody>
              <tr>
                <th>AWS Certified Solutions Architect</th>
                <td>
                  <Badge variant="info">EC2</Badge>
                </td>
                <td>
                  <Badge variant="info">Serverless</Badge>
                </td>
                <td>
                  <Badge variant="info">CI/CD</Badge>
                </td>
                <td>
                  <Badge variant="info">VPC</Badge>
                </td>
              </tr>
              <tr>
                <th>Front-End</th>
                <td>
                  <Badge variant="info">React</Badge>
                </td>
                <td>
                  <Badge variant="info">Jest/Enzyme</Badge>
                </td>
                <td>
                  <Badge variant="info">HTML</Badge>
                </td>
                <td>
                  <Badge variant="info">CSS</Badge>
                </td>
                <td>
                  <Badge variant="info">Bootstrap</Badge>
                </td>
              </tr>
       </tbody>
  </Table>

CSS：

table,
tr,
th,
td {
  border: none !important;
}

我有的： 实际的

预期的： 预期的

标签： htmlcsshtml-table

解决方案

table,
tr,
th,
td {
  border: none !important;
  padding: 4px;
}

badge {
    background: red;
    border-radius: 8px;
    padding: 0.5em;
    display: block;
    text-align: center;
}
<Table responsive bordered>
        <tbody>
          <tr>
            <th>AWS Certified Solutions Architect</th>
            <td>
              <Badge variant="info">EC2</Badge>
            </td>
            <td>
              <Badge variant="info">Serverless</Badge>
            </td>
            <td>
              <Badge variant="info">CI/CD</Badge>
            </td>
            <td>
              <Badge variant="info">VPC</Badge>
            </td>
          </tr>
          <tr>
            <th>Front-End</th>
            <td>
              <Badge variant="info">React</Badge>
            </td>
            <td>
              <Badge variant="info">Jest/Enzyme</Badge>
            </td>
            <td>
              <Badge variant="info">HTML</Badge>
            </td>
            <td>
              <Badge variant="info">CSS</Badge>
            </td>
            <td>
              <Badge variant="info">Bootstrap</Badge>
            </td>
          </tr>

添加display: block到徽章应该可以工作。

推荐阅读