如何在引导程序 4 中使每一列彼此相等

Question

大家好，我正在尝试使列的宽度彼此相等。我希望所有列的宽度都相同，除了列更新和删除。这两个应该和现在一样。

我正在使用引导程序 4.5.2

这是我的引导表

<table class="table table-bordered table-responsive-sm table-hover">
        <thead>
            <tr>
                <th>Date</th>
                <th>TimeSlot</th>
                <th>Room</th>
                <th>Attendees</th>
                <th>update</th>
                <th>delete</th>
            </tr>
        </thead>

                <tbody>
                    <tr class="table">
                        <td class="table">Date</td>
                        <td class="table">Time</td>
                        <td class="table">Room</td>
                        <td class="table">invitee</td>
                        <td class="table" style="display: none">reservationid</td>
                        <td class="table" style="display: none">invitedby</td>
                        <td class="table" style="display: none">workspace</td>
                        <td class="table">
                            <a onclick="onUpdate()" style="color: #007bff; cursor: pointer"> <i class="fa fa-pencil-square-o" aria-hidden="true"></i></a>
                        </td>
                        <td class="table">
                            <a onclick="onDelete()" style="color: #007bff; cursor: pointer"> <i class="fa fa-trash" aria-hidden="true"></i></a>                        </td>
                    </tr>
                </tbody>
            }
    </table>

这是我在浏览器中的引导表

Answer 1

您需要以某种方式将您的数据列与命令列区分开来，并将您的 CSS 仅应用于您的数据列：

td.table:not(.command) {
    border: 1px solid black;
    width: 15% !important;
}

<table class="table table-bordered table-responsive-sm table-hover">
        <thead>
            <tr>
                <th>Date</th>
                <th>TimeSlot</th>
                <th>Room</th>
                <th>Attendees</th>
                <th>update</th>
                <th>delete</th>
            </tr>
        </thead>

                <tbody>
                    <tr class="table">
                        <td class="table">Date</td>
                        <td class="table">Time</td>
                        <td class="table">Room</td>
                        <td class="table">invitee</td>
                        <td class="table" style="display: none">reservationid</td>
                        <td class="table" style="display: none">invitedby</td>
                        <td class="table" style="display: none">workspace</td>
                        <td class="table command">
                            <a onclick="onUpdate()" style="color: #007bff; cursor: pointer"> <i class="fa fa-pencil-square-o" aria-hidden="true"></i></a>
                        </td>
                        <td class="table command">
                            <a onclick="onDelete()" style="color: #007bff; cursor: pointer"> <i class="fa fa-trash" aria-hidden="true"></i></a>                        </td>
                    </tr>
                </tbody>
            }
    </table>

Answer 2

您可以从 HTML 中删除表格类，然后切换到 table-layout:fixed;，最后通过 :nth-last-child() 将最后 2 个单元格的 width 设置为 min-content。

edit min-content 使用 chrome 失败...使用 5em 左右的静态宽度。

可能是（在整页中运行 sn-p 以查看最后两个单元格没有增长）：

table.fixed {
  table-layout: fixed;
}

table.fixed tr> :nth-last-child(-n+2) {
  /*width: min-content; fails with chrome */
  width:5em;
  color:crimson;/* see me ;) */
  text-align:center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-bordered table-responsive-sm table-hover fixed"><!-- added a custom class named fixed -->
  <thead>
    <tr>
      <th>Date</th>
      <th>TimeSlot</th>
      <th>Room</th>
      <th>Attendees</th>
      <th>update</th>
      <th>delete</th>
    </tr>
  </thead>

  <tbody>
    <tr class="table">
      <td class="">Date</td>
      <td class="">Time</td>
      <td class="">Room</td>
      <td class="">invitee</td>
      <td class="" style="display: none">reservationid</td>
      <td class="" style="display: none">invitedby</td>
      <td class="" style="display: none">workspace</td>
      <td class="">
        <a onclick="onUpdate()" style="color: #007bff; cursor: pointer"> <i class="far fa-edit" aria-hidden="true"></i></a>
      </td>
      <td class="">
        <a onclick="onDelete()" style="color: #007bff; cursor: pointer"> <i class="far fa-trash-alt"></i></a></a>
      </td>
    </tr>
  </tbody>

Answer 3

如果你使用 flexbox，你可以使用 bootstrap 的内置类。下面是 HTML。

<table class="table table-bordered table-responsive-sm table-hover">
    <thead class="d-flex">
        <tr class="d-flex col-10 pl-0 pr-0">
            <th class="col-3">Date</th>
            <th class="col-3">TimeSlot</th>
            <th class="col-3">Room</th>
            <th class="col-3">Attendees</th>
        </tr>
        <tr class="d-flex col-2 pl-0 pr-0">
            <th class="col-6">update</th>
            <th class="col-6">delete</th>
        </tr>
    </thead>

    <tbody class="d-flex">
        <tr class="d-flex col-10 pl-0 pr-0">
            <td class="col-3">Date</td>
            <td class="col-3">Time</td>
            <td class="col-3">Room</td>
            <td class="col-3">invitee</td>
            <!-- <td class="table col" style="display: none">reservationid</td>
            <td class="table col" style="display: none">invitedby</td>
            <td class="table col" style="display: none">workspace</td> -->
        </tr>
        <tr class="d-flex col-2 pl-0 pr-0">
            <td class="col-6">
                <a onclick="onUpdate()" style="color: #007bff; cursor: pointer">
                    <i class="fa fa-pencil-square-o" aria-hidden="true"></i
                ></a>
            </td>
            <td class="col-6">
                <a onclick="onDelete()" style="color: #007bff; cursor: pointer">
                    <i class="fa fa-trash" aria-hidden="true"></i
                ></a>
            </td>
        </tr>
    </tbody>
</table>