如何使bootstrap表头宽度与主体宽度对齐？
[英]How to make the bootstrap table header width align with the body width?
问题描述
我有一个bootstrap表，我有表头的背景颜色。 因为我将表格宽度设为自动，所以与主体宽度相比，标题宽度更小。 我希望标题宽度与主体宽度对齐。我附加了一个附加在这里的plunker链接。
如何使标题和正文宽度对齐？
https://plnkr.co/edit/yIvC4XnOuEj6qVJH9rW8?p=preview
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <div class="container"> <table class="table table-striped" style=" width:auto!important;"> <thead> <tr style="background-color:red"> <th>DETAILS</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table> </div>
提前致谢！
3 个解决方案
解决方案1
1 2017-05-09 06:46:01
如果您希望标题为多列，请添加colspan="3"
colspan属性定义单元格应跨越的列数。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <div class="container"> <table class="table table-striped" style=" width:auto;"> <thead> <tr style="background-color:red"> <th colspan="3">DETAILS</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table> </div>
解决方案2
1 2017-05-09 06:57:19
为响应行为添加类：“dt-responsive”。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <div class="container"> <table class="table table-striped dt-responsive" style="width:auto;"> <thead> <tr style="background-color:red"> <th colspan="3">DETAILS</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table> </div>
解决方案3
1 2017-05-09 07:08:20
我们可以使用< caption >标签来实现它
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <table class="table table-striped"style=" width:auto!important;"> <caption style="background-color:red;text-align:center">Details</caption> <thead> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table> </div> </body> </html>
如何使这些固定列的宽度在 Bootstrap 4.0 表上响应？
[英]How to make these fixed cols' width on a Bootstrap 4.0 table-responsive?
如何将表中每个标题单元格的宽度（带有固定标题）设置为与其列中的最大单元格相同，并使浏览器尊重它？
[英]How to set the width of each header cell in a table (with fixed header) to be the same to the biggest in its column, and make the browser respect it?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.