个人中心
gpt4 book ai didi

javascript - Bootstrap 表格强制所有表格标题显示在一行上

转载 作者：行者123 更新时间：2023-11-30 12:02:14 28 4
gpt4 key购买 nike

我的表格标题是这样的:

table headers

我不喜欢某些 header 在多行上呈现的方式。我希望所有这些都在一行中，但我不确定该怎么做。

此外，我不喜欢 Notes 标题占用太多表格宽度。我怎样才能减少它占用的宽度？

我正在使用table-responsive as the w3schools example shows here .

更新:请注意，只需为较长的标题列提供更多的列网格空间:(例如:col-sm-4 而不是 col-sm -1 或 col-sm-2) 不是一个好的解决方案，因为那样会占用太多的网格点。后记 我不会为我的其余专栏留下足够的网格点。

基本上，我总是希望列标题位于一行中。如果列标题不能放在一行中，则进入响应模式以确保列标题将在一行中。

这是一个代码片段。确保点击“整页”:

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <h2>Table</h2>
    <p>The .table-responsive class creates a responsive table which will scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference:</p>
    <div class="table-responsive">
      <table class="table">
        <thead>
          <tr>
            <th>#</th>
            <th>Firstname</th>
            <th>Lastname really really long last name</th>
            <th>Age</th>
            <th>City</th>
            <th>Country</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis
              parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at
              eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum
              nulla sed consectetur. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis
              dis parturient montes, nascetur ridiculus mus.</td>
            <td>Pitt</td>
            <td>35</td>
            <td>Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis
              parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at
              eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum
              nulla sed consectetur. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis
              dis parturient montes, nascetur ridiculus mus.</td>
            <td>USA</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

</body>

</html>

最佳答案

您可以使用 col-[viewport]-[size]。请记住，列大小总计应为 12。请参阅以下更改:

我已经随机设置了列的大小，你可以根据你的要求修改:如下，总数不能大于 12 1+3+4+1+2+1 = 12 

<tr>
    <th class="col-xs-1">#</th>
    <th class="col-xs-3">Firstname</th>
    <th class="col-xs-4">Lastname really really long last name</th>
    <th class="col-xs-1">Age</th>
    <th class="col-xs-2">City</th>
    <th class="col-xs-1">Country</th>
</tr>

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <h2>Table</h2>
    <p>The .table-responsive class creates a responsive table which will scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference:</p>
    <div class="table-responsive">
      <table class="table">
        <thead>
          <tr>
            <th class="col-xs-1">#</th>
            <th class="col-xs-3">Firstname</th>
            <th class="col-xs-4">Lastname really really long last name</th>
            <th class="col-xs-1">Age</th>
            <th class="col-xs-2">City</th>
            <th class="col-xs-1">Country</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis
              parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at
              eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum
              nulla sed consectetur. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis
              dis parturient montes, nascetur ridiculus mus.</td>
            <td>Pitt</td>
            <td>35</td>
            <td>Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis
              parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at
              eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum
              nulla sed consectetur. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis
              dis parturient montes, nascetur ridiculus mus.</td>
            <td>USA</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

</body>

</html>

编辑:

如果您的内容很大并且不能放在一行中，它就不会；即使你让它响应。响应式尝试通过在需要时添加双行来将所有内容放在一行中。

Ways to achieve what you need :

  1. Adjust column sizes and makes other columns smaller
  2. Lower the font size to fit it in one line.
  3. Write custom class specifying the width

例如，默认宽度为:

.col-xs-4{
width:33.33%;
}

如果您想要自定义宽度，请创建如下类[IMP : Total should be exactly 100%]

.col-custom-1{
width:20%
}
.col-custom-2{
width:20%
}
.col-custom-3{
width:20%
}
.col-custom-4{
width:20%
}
.col-custom-5{
width:20%
}

您可以根据需要调整宽度或直接使用内联宽度，我更喜欢类。

关于javascript - Bootstrap 表格强制所有表格标题显示在一行上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36361541/

28 4 0
文章推荐： java - 子类使用 "this"调用父类(super class)方法
文章推荐： java - 如何将 JwtFilter 异常传递给服务器 JSON 答案？
文章推荐： Java/Swagger : Generate request example
文章推荐： java - 如何从 arrayList 中删除重复元素但对它们的参数求和？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com