时间戳

首页 > 解决方案 > 如何在引导程序 4 中使每一列彼此相等

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

问题描述

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

我正在使用引导程序 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>

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

标签： htmlcssbootstrap-4

解决方案

您需要以某种方式将您的数据列与命令列区分开来，并将您的 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>

推荐阅读