HTMLCSS TableRows

对不起,我的英语不好。我有一些表在我的页面上动态地创建,取决于用户是否有访问权。我创建了一个有2行的表,这是我的头,在一个嵌套for()中我创建了所有其他的表。我的Finall设置就是这样的。

<table class="table">
  <tr>
    <td class="col1">Header 1</td>
    <td class="col2">Header 2</td>
    <td class="col3">Header 3</td>
    <td class="col4">Header 4</td>
  </tr>
</table>
<table class="table">
  <tr>
    <td class="col1">column 1 for access 1</td>
    <td class="col2">column 2 for access 1</td>
    <td class="col3">column 3 for access 1</td>
    <td class="col4">column 4 for access 1</td>
  </tr>
</table>
<table class="table">
  <tr>
    <td class="col1">column 1 for access 2</td>
    <td class="col2">column 2 for access 2</td>
    <td class="col3">column 3 for access 2</td>
    <td class="col4">column 4 for access 2</td>
  </tr>
</table>
<table class="table">
  <tr>
    <td class="col1">column 1 for access 2</td>
    <td class="col2">column 2 for access 2</td>
    <td class="col3">column 3 for access 2</td>
    <td class="col4">column 4 for access 2</td>
  </tr>
</table>

我的CCS是

.tg {
  border-collapse: collapse;
  border-spacing: 0;
  border-color: #aabcfe;
  white-space: nowrap;
}
  .tg td {
    font-family: Arial, sans-serif;
    font-size: 12px;
    padding: 1px 1px;
    border-style: solid;
    border-width: 1px;
    overflow: visible;
    word-break: normal;
    border-color: #aabcfe;
    color: #669;
    background-color: #e8edff;
  }
  .tg th {
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: normal;
    padding: 1px 1px;
    border-style: solid;
    border-width: 1px;
    overflow: hidden;
    word-break: normal;
    border-color: #aabcfe;
    color: #039;
    background-color: #b9c9fe;
  }
    .tg .tg-column1{
      background-color: #e7ffe7;
      color: #000000;
      border-color: #000000;
      text-align: right;
      vertical-align: middle
    }
    .tg .tg-column2{
      font-weight: bold;
      color: #000000;
      border-color: #000000;
      text-align: center;
      vertical-align: middle;
      position: sticky;
      position: -webkit-sticky;
      top: -1px;
      will-change: transform
    }
    .tg .tg-column3{
      background-color: #e7ffe7;
      color: #000000;
      border-color: #000000;
      text-align: right;
      vertical-align: middle
    }
    .tg .tg-column4{
      font-weight: bold;
      color: #000000;
      border-color: #000000;
      text-align: center;
      vertical-align: middle;
      position: sticky;
      position: -webkit-sticky;
      top: -1px;
      will-change: transform
    }

每个表格中每个列的宽度是不同的。有没有办法让所有表的column1的宽度等于所有表的最大宽度?现在我得到的东西如下图所示 enter image description here

解决方案:

是的,这是可能的。

你不需要JS或任何东西来实现这一点。

只要确保,你是在同一个Table里。(根据HTML5,你应该使用thead和tbody)

<table class="table">
  <thead>
    <tr>
      <td class="col1">Header 1</td>
      <td class="col2">Header 2</td>
      <td class="col3">Header 3</td>
      <td class="col4">Header 4</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="col1">column 1 for access 1</td>
      <td class="col2">column 2 for access 1</td>
      <td class="col3">column 3 for access 1</td>
      <td class="col4">column 4 for access 1</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td class="col1">column 1 for access 2</td>
      <td class="col2">column 2 for access 2</td>
      <td class="col3">column 3 for access 2</td>
      <td class="col4">column 4 for access 2</td>
    </tr>
  </tbody>
  <tbdoy>
  <tr>
    <td class="col1">column 1 for access 2</td>
    <td class="col2">column 2 for access 2</td>
    <td class="col3">column 3 for access 2</td>
    <td class="col4">column 4 for access 2</td>
  </tr>
  </tbdoy>
</table>

“这样就会自动将最宽的单元格的宽度设置为所有单元格。”

给TA打赏
共{{data.count}}人
人已打赏
未分类

如何在Electron使用jQuery?

2022-9-9 5:19:18

未分类

R data.table 删除以"_nd "结尾的列。

2022-9-9 5:19:20

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索