试试这个

CSS

equal-width {
width : 11% !important;
}

您可以根据列数更改%。

HTML

        <tbody>
            <tr class="table">
                <td class="table equal-width">Date</td>
                <td class="table equal-width">Time</td>
                <td class="table equal-width">Room</td>
                <td class="table equal-width">invitee</td>
                <td class="table equal-width" style="display: none">reservationid</td>
                <td class="table equal-width" style="display: none">invitedby</td>
                <td class="table equal-width" style="display: none">workspace</td>
                <td class="table equal-width">
                    <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>

在这里不要使用css类最终。因为剩下的%会变成这个。

您需要以某种方式区分数据列和命令列，并仅对数据列应用CSS:

null

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>

您可以使用Bootstraps的内置类来实现这一点。通过将前4个头指定为col-3，它们将各自尝试占用总数12个中的四分之一，但将为剩下的两个留出空间，因为它们必须存在。此外，您不必为子项（tbody中的td标记）指定宽度。下面的HTML。

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

    <tbody>
        <tr class="table">
            <td>Date</td>
            <td>Time</td>
            <td>Room</td>
            <td>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>
            <td>
                <a style="color: #007bff; cursor: pointer">
                    <i class="fa fa-pencil-square-o" aria-hidden="true"></i
                ></a>
            </td>
            <td>
                <a style="color: #007bff; cursor: pointer"> <i class="fa fa-trash" aria-hidden="true"></i></a>
            </td>
        </tr>
    </tbody>
</table>

文档:https://getbootstrap.com/docs/4.0/layout/grid/