Question

基本上这是一张桌子。我想要它响应（不是视口，只是浏览器宽度。我不想要固定的px宽度），我希望它滚动。

但是你可以看到它在tbody部分做了奇怪的事情。我不知道为什么它没有占据全宽...

我该如何解决？

顺便说一下，第一列（Color）有colspan =＆＃34; 2＆＃34;属性，就是你知道的。

我找到了一种解决方法，这要归功于css calc（）函数和一些基本数学。

＆＃13;

table {
    margin: 0% 5%;
    width: 90%;
    color: black;
    font-family: Consolas;
    border-spacing: 0;
}
table, td, th {
    border: 1px solid black;
    box-sizing: border-box;
}
tbody {
    width: 100%;
    height: 80px;
    overflow-y: auto;
    overflow-x: hidden;
}
td, th {
  padding: 4px 0px;
  display: inline-block;
}

tbody, thead, tr {
  width: 100%;
  display: inline-block;
}
th.special {
  width: calc( 29% - 0.29*17px + 17px);
}
td.A {width: 14%;}
td.B {width: 29%;} 
td.C {width: 43%;}
th.A {width: calc(14% - 0.14*17px); }
th.B {width: calc(29% - 0.29*17px); } 
th.C {width: calc(43% - 0.43*17px);}
td.color { background-color: #FE33E9; }

＆＃13;

<table>
<thead>
    <tr><th class="C" colspan="2">Color</th><th class="A">X</th><th class="A">Y</th><th class="special">Caption</th></tr>
</thead>
<tbody>
    <tr><td class="A color">.</td><td class="B">FE33E9</td><td class="A">121</td><td class="A">433</td><td class="B">bottom</td></tr>
    <tr><td class="A color">.</td><td class="B">FE33E9</td><td class="A">121</td><td class="A">433</td><td class="B">bottom</td></tr>
    <tr><td class="A color">.</td><td class="B">FE33E9</td><td class="A">121</td><td class="A">433</td><td class="B">bottom</td></tr>
    <tr><td class="A color">.</td><td class="B">FE33E9</td><td class="A">121</td><td class="A">433</td><td class="B">bottom</td></tr>
    <tr><td class="A color">.</td><td class="B">FE33E9</td><td class="A">121</td><td class="A">433</td><td class="B">bottom</td></tr>
    <tr><td class="A color">.</td><td class="B">FE33E9</td><td class="A">121</td><td class="A">433</td><td class="B">bottom</td></tr>
</tbody>
</table>

＆＃13;

Answer 1

你必须使用calc宽度来获取它，你仍然需要写一些media query来获得正确的响应表。

更新css部分

td {
  width: calc(100% / 5 - 8px);
}

th {
  width: calc(100% / 4);
}

table {
  margin: 0% 5%;
  width: 90%;
  color: black;
  font-family: Consolas;
  border-spacing: 0;
}

table tbody tr {
  display: block;
  white-space: nowrap;
}

table,
td,
th {
  border: 1px solid black;
  box-sizing: border-box;
}

td,
th {
  padding: 4px 0px;
  display: inline-block;
}

td {
  width: calc(100% / 5 - 8px);
}

th {
  width: calc(100% / 4);
}


/* th.A, td.A {width: 14%;}
th.B, td.B {width: 29%;} 
th.C, td.C {width: 43%;} */

td.color {
  background-color: #FE33E9;
}

table tbody {
  display: inline-block;
  width: 100%;
  height: 80px;
  overflow-y: auto;
  overflow-x: hidden;
}

<table>
  <thead>
    <tr>
      <th class="C" colspan="2">Color</th>
      <th class="A">X</th>
      <th class="A">Y</th>
      <th class="B">Caption</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="A color">.</td>
      <td class="B">FE33E9</td>
      <td class="A">121</td>
      <td class="A">433</td>
      <td class="B">bottom</td>
    </tr>
    <tr>
      <td class="A color">.</td>
      <td class="B">FE33E9</td>
      <td class="A">121</td>
      <td class="A">433</td>
      <td class="B">bottom</td>
    </tr>
    <tr>
      <td class="A color">.</td>
      <td class="B">FE33E9</td>
      <td class="A">121</td>
      <td class="A">433</td>
      <td class="B">bottom</td>
    </tr>
    <tr>
      <td class="A color">.</td>
      <td class="B">FE33E9</td>
      <td class="A">121</td>
      <td class="A">433</td>
      <td class="B">bottom</td>
    </tr>
    <tr>
      <td class="A color">.</td>
      <td class="B">FE33E9</td>
      <td class="A">121</td>
      <td class="A">433</td>
      <td class="B">bottom</td>
    </tr>
    <tr>
      <td class="A color">.</td>
      <td class="B">FE33E9</td>
      <td class="A">121</td>
      <td class="A">433</td>
      <td class="B">bottom</td>
    </tr>
  </tbody>
</table>

Answer 2

您还需要tr width: 100%。

这应该有效：

table tbody tr {
  display: inline-block;
  width: 100%;
}

Answer 3

您将显示为内联块，这意味着它只占用内容空间，因此将显示样式设为块，它将完全取宽度。

//Here is the Updated CSS

table {
   margin: 0% 5%;
   width: 90%;
   color: black;
   font-family: Consolas;
   border-spacing: 0;
}
table, td, th {
   border: 1px solid black;
   box-sizing: border-box;
}
td, th {
   padding: 4px 0px;
   display:inline-block;
}


th.A, td.A {width: 14%;}
th.B, td.B {width: 29%;} 
th.C, td.C {width: 43%;}
td.color {
  background-color: #FE33E9;
}

table tbody {
   display: inline-block;
   width: 100%;
   height: 80px;
   /*Updated*/
   //overflow-y: auto;
   //overflow-x: hidden; //these No Need just give overflow as auto;
   overflow : auto;
}

//Newly Added

tr {
   display: inline;
}

Answer 4

尝试这个

＆＃13;

#container {
  height: 200px;
  width: 100%;
}

table {
  width: 100%;
  color: black;
  font-family: Consolas;
  border-spacing: 0;
  display: block;
}

table,
th,
td {
  border: 1px solid black;
  box-sizing: border-box;
}

td {
  width: 5%;
}

.fth {
  width: 6.4%;
}

.sth {
  width: 3.1%;
}

.tth {
  width: 3.1%;
}

.foth {
  width: 3%;
}

td.color {
  background-color: #FE33E9;
}

table thead {
  display: inline-block;
  width: 100%;
}

table tbody {
  display: inline-block;
  width: 100%;
  overflow-y: auto;
  text-align: center;
  height: 100px;
}

＆＃13;

<div id="container">
		<table id="table-1">
			<thead id="header-fixed">
			    <tr style=""><th colspan="2" class="fth">Color</th><th class="sth">X</th><th class="tth">Y</th><th class="foth">Caption</th></tr>
			</thead>
			<tbody>
				<tr><td class="A color">.</td><td>FE33E9</td><td>121</td><td>433</td><td>bottom</td></tr>
				<tr><td class="A color">.</td><td>FE33E9</td><td>121</td><td>433</td><td>bottom</td></tr>
				<tr><td class="A color">.</td><td>FE33E9</td><td>121</td><td>433</td><td>bottom</td></tr>
				<tr><td class="A color">.</td><td>FE33E9</td><td>121</td><td>433</td><td>bottom</td></tr>
				<tr><td class="A color">.</td><td>FE33E9</td><td>121</td><td>433</td><td>bottom</td></tr>
				<tr><td class="A color">.</td><td>FE33E9</td><td>121</td><td>433</td><td>bottom</td></tr>
				<tr><td class="A color">.</td><td>FE33E9</td><td>121</td><td>433</td><td>bottom</td></tr>
				<tr><td class="A color">.</td><td>FE33E9</td><td>121</td><td>433</td><td>bottom</td></tr>
				<tr><td class="A color">.</td><td>FE33E9</td><td>121</td><td>433</td><td>bottom</td></tr>
				<tr><td class="A color">.</td><td>FE33E9</td><td>121</td><td>433</td><td>bottom</td></tr>
				<tr><td class="A color">.</td><td>FE33E9</td><td>121</td><td>433</td><td>bottom</td></tr>
				<tr><td class="A color">.</td><td>FE33E9</td><td>121</td><td>433</td><td>bottom</td></tr>
				<tr><td class="A color">.</td><td>FE33E9</td><td>121</td><td>433</td><td>bottom</td></tr>
				<tr><td class="A color">.</td><td>FE33E9</td><td>121</td><td>433</td><td>bottom</td></tr>
  		</tbody>
		</table>
	</div>

＆＃13;

我在thead滚动

时编辑了tbody的代码

现在使用css

正常工作

样式化html表以进行响应和垂直滚动

4 个答案: