【问题标题】：Change Width in table using Bootstrap使用 Bootstrap 更改表格中的宽度
【发布时间】：2021-06-14 01:27:13
【问题描述】：

我可以知道如何更改上述 Bootstrap HTML 表格的宽度，因为该表格似乎跨越了浏览器屏幕？谢谢。

 # here is where i embedded bootstrap into my html table
 <!-- Bootstrap CSS -->
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

</head>
<body>

<h2>HTML Table</h2>

# i have use bootstrap here for the table design
<div class="table-responsive">
<table class="table, table table-striped">
  <thead class="thead-dark">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  </thead>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
</table>
</div>

</body>
</html>

这是一个嵌入了没有 CSS 样式标签的引导程序的 html 代码

【问题讨论】：

请附上您目前编写的代码。 How to create a Minimal, Reproducible Example
@DBS 您好，我已添加代码
您可以将您的表格放在container 中。 <div class="container">your responsive table here</div>
@firatozcevahir 我应该如何在引导程序中使用容器？
您可以在此处阅读有关布局的文档getbootstrap.com/docs/4.1/layout/overview/#containers

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border: 1px solid #ddd;
}

【讨论】：