使 header 行成为 html 中数据行的宽度

Question

我在 HTML 中有一个 table。问题是我在每个单元格之间设置了 space，所以我为此使用了边距。但这导致我不能连续使用 col-12，所以在这种情况下，它变成了 col-11（所有列的总和）。但它导致 header 行在整行中，而迭代行（数据行）不在整行中。如何使 header 行处于数据行宽度？

.event-col {
  border-radius: 10px;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
  background-color: #fff;
  padding: 10px;
  margin: 2px;
  display: inline-block;
}

.event-col-header {
  padding: 10px;
  margin: 2px;
  display: inline-block;
  border: 0px !important;
  font-weight: bold;
  font-family: IRANSans;
}

.event-row {
  border-radius: 10px;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
  background-color: #c1d2fe;
  margin: 10px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div class="row">
  <div class="col-12">
    <table id="example" class="table dt-responsive nowrap showborder ">
      <tr class="event-row mb-1">
        <th class="col-1 event-col-header">No</th>
        <th class="col-2 event-col-header">Name </th>
        <th class="col-1 event-col-header">Date</th>
        <th class="col-2 event-col-header">Hour</th>
        <th class="col-5 event-col-header">Address</th>
      </tr>

      <tr>
        <td class="col-1 event-col">@counter</td>
        <td class="col-2 event-col">@item.Name</td>
        <td class="col-1 event-col">@item.EventDate</td>
        <td class="col-2 event-col"> @item.StartTime </td>
        <td class="col-5 event-col">@item.Address</td>
      </tr>
    </table>
  </div>
</div>

Answer 1

它们的宽度相同，但由于您使用的是 inline-block，因此它们不使用父元素的总和所以你没有正确使用 bootstrap 列对于表格，您无需使用 cols 和 rows

bootstrap 围栏系统不适用于表格尝试在没有 BS gird 的情况下构建它

Answer 2

我修改了你的代码如下：

.event-col {
    border-radius: 10px;
    box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
    background-color: #fff;
    /*padding: 10px;*/
    /*margin: 2px;*/
    display: inline-block;
    width: 100%;
}
.event-col-header {
    /*padding: 10px;*/
    /*margin: 2px;*/
    display: inline-block;
    /*border: 0 !important;*/
    font-weight: bold;
    font-family: IRANSans;
}
.event-row {
    border-radius: 10px;
    box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
    background-color: #c1d2fe;
    /*margin: 10px;*/
}

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- bootstrap 4.6 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

    <!-- my style-sheet -->
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body dir="rtl">

<div class="container-fluid">
<div class="row text-right">
    <div class="col-11 mx-auto">
        <table id="example" class="table table-borderless table-responsive" >
            <tr class="event-row mb-1">
                <th class="col-1">
                    <span class="event-col-header">No</span>
                </th>
                <th class="col-2">
                    <span class="event-col-header">Name</span>
                </th>
                <th class="col-1">
                    <span class="event-col-header">Date</span>
                </th>
                <th class="col-2">
                    <span class="event-col-header">Hour</span>
                </th>
                <th class="col-5">
                    <span class="event-col-header">Address</span>
                </th>
            </tr>
            <tr >
                <td class="col-1">
                    <span class="event-col p-3">@counter</span>
                </td>
                <td class="col-2">
                    <span class="event-col p-3">@item.Name</span>
                </td>
                <td class="col-1">
                    <span class="event-col p-3">@item.EventDate</span>
                </td>
                <td class="col-2">
                    <span class="event-col p-3">@item.StartTime</span>
                </td>
                <td class="col-5">
                    <span class="event-col p-3">@item.Address</span>
                </td>
            </tr>
            <tr >
                <td class="col-1">
                    <span class="event-col p-3">@counter</span>
                </td>
                <td class="col-2">
                    <span class="event-col p-3">@item.Name</span>
                </td>
                <td class="col-1">
                    <span class="event-col p-3">@item.EventDate</span>
                </td>
                <td class="col-2">
                    <span class="event-col p-3">@item.StartTime</span>
                </td>
                <td class="col-5">
                    <span class="event-col p-3">@item.Address</span>
                </td>
            </tr>
            <tr >
                <td class="col-1">
                    <span class="event-col p-3">@counter</span>
                </td>
                <td class="col-2">
                    <span class="event-col p-3">@item.Name</span>
                </td>
                <td class="col-1">
                    <span class="event-col p-3">@item.EventDate</span>
                </td>
                <td class="col-2">
                    <span class="event-col p-3">@item.StartTime</span>
                </td>
                <td class="col-5">
                    <span class="event-col p-3">@item.Address</span>
                </td>
            </tr>

        </table>
    </div>
</div>
</div>


<!-- bootstrap scripts -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

</body>
</html>

Important tips in my opinion about that code:

1- 不要将您的文字直接放在 col-1 或 col-2 或 ... 中。假设它们是 container 并将内容放入其他 HTML 标签中，例如本例中的 <span>。

2- 使用 bootstrap 的 margin and padding utilities 而不是自己设置边距和填充。

3-当你使用row和col-*classes时，通常使用container-fluid或containerclasses会得到更好的结果.所以我把 .container-fluid 标签作为 table.

的整个父级

4- 如果您想在 table 中支持响应，bootstrap 有一个 .table-responsive class，您可以将其添加到 table。

Answer 3

当我查看 bootstrap table 文档时，我找不到任何在表格中使用 col-* 类的示例。所以我还写了另一个代码，它使用 HTML <colgroup> 标记而不是使用 col-* 类具有类似结果：

.event-col {
    border-radius: 10px;
    box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
    background-color: #fff;
    display: inline-block;
    width: 100%;
}
.event-col-header {
    display: inline-block;
    font-weight: bold;
    font-family: IRANSans;
}
.event-row {
    border-radius: 10px;
    box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
    background-color: #c1d2fe;
}

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- bootstrap 4.6 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

  <!-- my style-sheet -->
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>
<body dir="rtl">

<div class="container-fluid">
<div class="row text-right">
  <div class="col-11 mx-auto">
    <table id="example" class="table table-borderless table-responsive" >
      <colgroup>
        <col style="width: 9%">
        <col style="width: 18%">
        <col style="width: 9%">
        <col style="width: 18%">
        <col style="width: 46%">
      </colgroup>
      <tr class="event-row mb-1">
        <th>
          <span class="event-col-header">No</span>
        </th>
        <th>
          <span class="event-col-header">Name</span>
        </th>
        <th>
          <span class="event-col-header">Date</span>
        </th>
        <th>
          <span class="event-col-header">Hour</span>
        </th>
        <th>
          <span class="event-col-header">Address</span>
        </th>
      </tr>
      <tr >
        <td>
          <span class="event-col p-3">@counter</span>
        </td>
        <td>
          <span class="event-col p-3">@item.Name</span>
        </td>
        <td>
          <span class="event-col p-3">@item.EventDate</span>
        </td>
        <td>
          <span class="event-col p-3">@item.StartTime</span>
        </td>
        <td>
          <span class="event-col p-3">@item.Address</span>
        </td>
      </tr>
      <tr >
        <td>
          <span class="event-col p-3">@counter</span>
        </td>
        <td>
          <span class="event-col p-3">@item.Name</span>
        </td>
        <td>
          <span class="event-col p-3">@item.EventDate</span>
        </td>
        <td>
          <span class="event-col p-3">@item.StartTime</span>
        </td>
        <td>
          <span class="event-col p-3">@item.Address</span>
        </td>
      </tr>
      <tr >
        <td>
          <span class="event-col p-3">@counter</span>
        </td>
        <td>
          <span class="event-col p-3">@item.Name</span>
        </td>
        <td>
          <span class="event-col p-3">@item.EventDate</span>
        </td>
        <td>
          <span class="event-col p-3">@item.StartTime</span>
        </td>
        <td>
          <span class="event-col p-3">@item.Address</span>
        </td>
      </tr>

    </table>
  </div>
</div>
</div>

<!-- bootstrap scripts -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

</body>
</html>

Answer 4

您真的不想将 Bootstrap 的网格布局与 table 纠缠在一起。如果您只想要气泡样式，请将 div 放入 table 单元格中并使用它们。

如果您随后想明确调整某些列的大小，请执行此操作。

.event-row {
  border-radius: 10px;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
  background-color: #c1d2fe;
}

.event-col {
  border-radius: 10px;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
  background-color: #fff;
  padding: 10px;
  display: inline-block;
}

.event-col-header {
  padding: 10px;
  display: inline-block;
  border: 0px !important;
  font-weight: bold;
  font-family: IRANSans;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div class="row">
  <div class="col-12">
    <table id="example" class="table dt-responsive nowrap showborder">
      <tr class="event-row mb-1">
        <th>
          <div class="event-col-header">No</div>
        </th>
        <th>
          <div class="event-col-header">Name</div>
        </th>
        <th>
          <div class="event-col-header">Date</div>
        </th>
        <th>
          <div class="event-col-header">Hour</div>
        </th>
        <th>
          <div class="event-col-header">Address</div>
        </th>
      </tr>

      <tr>
        <td>
          <div class="event-col">@counter</div>
        </td>
        <td>
          <div class="event-col">@item.Name</div>
        </td>
        <td>
          <div class="event-col">@item.EventDate</div>
        </td>
        <td>
          <div class="event-col"> @item.StartTime</div>
        </td>
        <td>
          <div class="event-col">@item.Address</div>
        </td>
      </tr>
    </table>
  </div>
</div>

使 header 行成为 html 中数据行的宽度

making header row the width of the data row in html

html

css

bootstrap-4