时间戳

首页 > 解决方案 > 容器流体中的引导固定宽度表列

html - 容器流体中的引导固定宽度表列

问题描述

我有一个问题问你。我正在尝试在容器流体div 中修复表格列的大小。我曾尝试设置style="width: xx.x%"，但它会根据单元格内容继续更改。

我也尝试过使用 max-with，但它仍然不起作用。在我的代码下面：

    <div class="container-fluid">
          <div class="row">
            <div class="col-12">
                  <table class="table table-sm text-nowrap">
            <thead>
              <tr class="bg-info text-white">
                <th style="max-width: 1%">2020</th>
                <th style="max-width: 9%">Voci</th>
                <th class="text-center" style="max-width: 7.5%">Gen</th>
                <th class="text-center" style="max-width: 7.5%">Feb</th>
.......

我希望该列具有固定宽度（广告示例最大值和最小值等于 7.5%）。我怎么能在引导程序中得到这个？

标签： htmldjangohtml-tablebootstrap-4django-templates

解决方案

您应该使用d-flex您的财产table来制作fix width.

您可以使用col类来指定每列的宽度。

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        <table id="productSizes" class="table">
          <thead>
            <tr class="bg-info d-flex">
              <th class="col-3">2020</th>
              <th class="col-3">Voice</th>
              <th class="col-3">Gen</th>
              <th class="col-3">Feb</th>
            </tr>
          </thead>
          <tbody>
            <tr class="d-flex">
              <td class="col-3">First Column with fixed width look at that, it is moving text to next line if it
                overflowing</td>
              <td class="col-3">Second Column with fixed width</td>
              <td class="col-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita, atque earum
                asperiores ex
                quod quia mollitia dese</td>
              <td class="col-3">This is third clumn</td>
            </tr>
            <tr class="d-flex">
              <td class="col-3">8</td>
              <td class="col-3">84 - 86</td>
              <td class="col-3">66 - 68</td>
              <td class="col-3">94 - 96</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

</body>

</html>

推荐阅读