使用Bootstrap类d-none d-sm-block d-md-block时表格出现异常边框

问题原因 #

你给表格单元格（th/td）添加了d-sm-block类，这会把单元格默认的display: table-cell改成display: block，破坏表格原生布局结构，导致边框渲染异常。另外表格标签上的border="1px"属性和Bootstrap的.table类边框样式存在冲突，也会加重显示问题。

修复方案 #

1. 修正响应式显示类：将单元格的类从d-none d-sm-block d-md-block改为d-none d-sm-table-cell。d-sm-table-cell会在小屏（sm）及以上设备保持单元格的table-cell显示模式，维持表格布局完整性，同时在移动设备（xs）上通过d-none隐藏列。
2. 统一边框样式：移除表格标签的border="1px"属性，改用Bootstrap的.table-bordered类来添加统一的表格边框。
3. 修复未闭合标签：补全<a>标签的闭合标记，避免页面渲染异常。

修正后的代码 #

<table class="table table-hover table-bordered">
    <thead class="thead-dark">
    <tr>
      <th class="d-none d-sm-table-cell">Fund</th>
      <th>Why them</th>
      <th>How to donate</th>
    </tr>
    </thead>
    {% for fund in funds_list %}
        <tr>
          <td class="d-none d-sm-table-cell"> <a href={{ fund.url }} target="_blank" rel="noopener noreferrer">{{ fund.name }}</a></td>
          <td> {{ fund.description|safe }}</td>
          <td> <a href={{ fund.bank_details }} target="_blank" rel="noopener noreferrer" class="btn btn-primary stretched-link">Go to website</a></td>
        </tr>
    {% endfor %}
</table>

补充说明 #

• Bootstrap的响应式显示类中，针对表格元素有专门的d-*-table-cell类，用于保持表格布局的完整性，避免直接使用d-*-block破坏结构。
• 如果需要更精细的自定义控制，也可以通过CSS媒体查询实现：

@media (max-width: 575.98px) {
    .hidden-xs {
        display: none !important;
    }
}

给目标单元格添加hidden-xs类，同样能实现移动设备隐藏列的效果，且不破坏表格布局。

内容的提问来源于stack exchange，提问作者idunskyi