个人中心
gpt4 book ai didi

html - 表格行在第一个表格中没有拉伸(stretch)全长，在第二个表格中它做得很好

转载 作者：行者123 更新时间：2023-12-04 08:32:36 25 4
gpt4 key购买 nike

在下面的代码中，我的第一个表行没有拉伸(stretch)到满，这令人沮丧。虽然第二张 table 很好并且可以按预期拉伸(stretch)。有人可以引用我的原因并帮助解决它吗？

body {padding: 20px;}
table {border:1px solid gray;}
.orange {background:#ffa566!important;}
.aqua {background: #aaffff!important;}
table {display:inline-block;float:left;}
tbody, thead {width:100%;}
<html>

<head>

<link rel="stylesheet" src="<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" />

</head>

<body>

<h1>Lok Sabha</h1>

<h3>2019</h1>

<table class="table table-striped" style="width:500px">
    <thead>
    <tr><th>#</th><th>Party</th><th>Seats</th></tr>
    </thead>
    <tbody>
    <tr class="orange"><td>1</td><td>BJP</td><td>303</td></tr>
    <tr class="orange"><td>2</td><td>Shiv-Sena</td><td>18</td></tr>
    <tr class="orange"><td>3</td><td>JD(U)</td><td>14</td></tr>
    <tr class="orange"><td>4</td><td>LJP</td><td>6</td></tr>
    <tr><td>5</td><td>Akali-Dal</td><td>2</td></tr>
    <tr><td>6</td><td>Apna-Dal</td><td>2</td></tr>
    <tr><td>7</td><td>Jharkhand Student Union</td><td>2</td></tr>
    <tr><td>8</td><td>AIDMK</td><td>1</td></tr>
    <tr><td>9</td><td>Loktantrik-Party (Hanuman Beniwal)</td><td>1</td></tr>
    <tr><td>10</td><td>Democratic-Progressive-Party (Nagaland)</td><td>1</td></tr>
    <tr><td>11</td><td>People-Party (Meghalay-Manipur)</td><td>1</td></tr>
    </tbody>
</table>

<table class="table table-striped" style="width:500px">
    <tr><th>#</th><th>Party</th><th>Seats</th></tr>
    <tr class="aqua"><td>1</td><td>Congress</td><td>52</td></tr>
    <tr class="aqua"><td>2</td><td>DMK (Karunanidhi)</td><td>23</td></tr>
    <tr class="aqua"><td>3</td><td>NCP (Sharad-Pawar)</td><td>5</td></tr>
    <tr><td>4</td><td>National-Conference (farooq-abdulla)</td><td>3</td></tr>
    <tr><td>5</td><td>Indian Union Muslim League - Kerela</td><td>3</td></tr>
    <tr><td>6</td><td>Janata-Dal(Secular) - Dewegowda/Karnataka</td><td>1</td></tr>
    <tr><td>7</td><td>Jharkhand Mukti Morcha</td><td>1</td></tr>
    <tr><td>8</td><td>Revolutionary Socialist Party - left-winged/ socialist/ W.Bengal</td><td>1</td></tr>
    <tr><td>9</td><td>Kerela-Congress[M] - Chrisitan/Kerela/5mla-seats</td><td>1</td></tr>
    <tr><td>10</td><td>VCK (Tamil Panther Party) -Supports LTTE/dalit-tamil-support/tamil-nationalism</td><td>1</td></tr>
</table>

</body>

</html>

最佳答案

删除 display: inline-block;在表中应该可以解决问题。

body {
  padding: 20px;
}

table {
  border: 1px solid gray;
}

.orange {
  background: #ffa566 !important;
}

.aqua {
  background: #aaffff !important;
}

table {
  float: left;
}

tbody,
thead {
  width: 100%;
}
<h1>Lok Sabha</h1>

<h3>2019</h1>

  <table class="table table-striped" style="width:500px">
    <thead>
      <tr>
        <th>#</th>
        <th>Party</th>
        <th>Seats</th>
      </tr>
    </thead>
    <tbody>
      <tr class="orange">
        <td>1</td>
        <td>BJP</td>
        <td>303</td>
      </tr>
      <tr class="orange">
        <td>2</td>
        <td>Shiv-Sena</td>
        <td>18</td>
      </tr>
      <tr class="orange">
        <td>3</td>
        <td>JD(U)</td>
        <td>14</td>
      </tr>
      <tr class="orange">
        <td>4</td>
        <td>LJP</td>
        <td>6</td>
      </tr>
      <tr>
        <td>5</td>
        <td>Akali-Dal</td>
        <td>2</td>
      </tr>
      <tr>
        <td>6</td>
        <td>Apna-Dal</td>
        <td>2</td>
      </tr>
      <tr>
        <td>7</td>
        <td>Jharkhand Student Union</td>
        <td>2</td>
      </tr>
      <tr>
        <td>8</td>
        <td>AIDMK</td>
        <td>1</td>
      </tr>
      <tr>
        <td>9</td>
        <td>Loktantrik-Party (Hanuman Beniwal)</td>
        <td>1</td>
      </tr>
      <tr>
        <td>10</td>
        <td>Democratic-Progressive-Party (Nagaland)</td>
        <td>1</td>
      </tr>
      <tr>
        <td>11</td>
        <td>People-Party (Meghalay-Manipur)</td>
        <td>1</td>
      </tr>
    </tbody>
  </table>

  <table class="table table-striped" style="width:500px">
    <tr>
      <th>#</th>
      <th>Party</th>
      <th>Seats</th>
    </tr>
    <tr class="aqua">
      <td>1</td>
      <td>Congress</td>
      <td>52</td>
    </tr>
    <tr class="aqua">
      <td>2</td>
      <td>DMK (Karunanidhi)</td>
      <td>23</td>
    </tr>
    <tr class="aqua">
      <td>3</td>
      <td>NCP (Sharad-Pawar)</td>
      <td>5</td>
    </tr>
    <tr>
      <td>4</td>
      <td>National-Conference (farooq-abdulla)</td>
      <td>3</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Indian Union Muslim League - Kerela</td>
      <td>3</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Janata-Dal(Secular) - Dewegowda/Karnataka</td>
      <td>1</td>
    </tr>
    <tr>
      <td>7</td>
      <td>Jharkhand Mukti Morcha</td>
      <td>1</td>
    </tr>
    <tr>
      <td>8</td>
      <td>Revolutionary Socialist Party - left-winged/ socialist/ W.Bengal</td>
      <td>1</td>
    </tr>
    <tr>
      <td>9</td>
      <td>Kerela-Congress[M] - Chrisitan/Kerela/5mla-seats</td>
      <td>1</td>
    </tr>
    <tr>
      <td>10</td>
      <td>VCK (Tamil Panther Party) -Supports LTTE/dalit-tamil-support/tamil-nationalism</td>
      <td>1</td>
    </tr>
  </table>

关于html - 表格行在第一个表格中没有拉伸(stretch)全长，在第二个表格中它做得很好，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64950046/

25 4 0
文章推荐： prolog - 在 prolog 中写入文件的问题
文章推荐： html - CSS 滚动 - 卡入到位？
文章推荐： javascript - 使用 JS/jQuery 修改 HTML 中日期/时间文本字符串的值
文章推荐： gem5 - 为什么在 gem5 中添加 DPRINTF(XXX 调试标志失败， "error:' XXX' 未在此范围内声明”？
行者123
个人简介

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

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