Question

我有一个td标签，当我调整浏览器大小时，它会缩小。

的链接

＆＃13;

table {
  table-layout: fixed;
  margin-left: auto;
  margin-right: auto;
  border-collapse: collapse;
}

table,
th,
td {
  border: 2px solid black;
}

.line:after {
  content: ' ';
  display: block;
  border: 1px solid black;
}

.border {
  word-spacing: 25px;
  padding-top: 10px;
  padding-bottom: 10px;
  background: dodgerblue;
  border-radius: 5px;
  /*  border-style: solid;
 border-width: px; */
}

.fixed {
  padding: 10px;
}

.br {
  display: block;
}

.bold {
  font-weight: bold;
}

.border1 {
  word-spacing: 4px;
  padding-top: 10px;
  padding-bottom: 10px;
  background: dodgerblue;
  border-radius: 5px;
  border-style: solid;
  border-color: black;
}

.border2 {
  word-spacing: 4px;
  padding-top: 10px;
  padding-bottom: 10px;
  background: dodgerblue;
  border-radius: 5px;
  border-style: solid;
  border-color: red;
}

.lavender {
  background-color: orchid;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 5px;
}

.orange {
  background-color: orange;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 5px;
}

.orange1 {
  padding-left: 10px;
  padding-right: 10px;
  background-color: orange;
  padding-top: 2px;
  padding-bottom: 2px;
  border-style: solid;
  border-width: 1px;
  border-color: black;
}

.lavender1 {
  background-color: orchid;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 2px;
  padding-bottom: 2px;
  border-style: solid;
  border-width: 1px;
  border-color: black;
}

.border3 {
  word-spacing: 13px;
  padding-top: 10px;
  padding-bottom: 10px;
  background: dodgerblue;
  border-radius: 5px;
  border-style: solid;
  border-color: black;
}


}

＆＃13;

<table>
  <tr>
    <th class="text-center" colspan="4">Flight Puck</th>
  </tr>
  <tr>
    <th class="text-center">Behaviour</th>
    <th class="text-center">Description</th>
  </tr>
  <tr>
    <td class="fixed text-center"><span class="border bold">2210      924-16(267)     1030</span></td>
    <td class=" text-center"><span class="line text-center bold">Standard Flight Puck</span>
      <p>Departure time-Flight number-date-passenger Count(Including Non-Revs)-<span class="br">Arrival Time</span></p>
    </td>
  </tr>


  <tr>
    <td class="fixed text-center"><span class="border1 bold ">2210      924-16(77Q)(267)     1030</span></td>
    <td class=" text-center"><span class="line text-center bold">Black Flight Puck Border</span>
      <p>Flight operating in inon scheduled equipment,<span class="bold">within</span> the same fleet<span class="br">Scheduled equipment type in brackets after flight number </span></p>
    </td>
  </tr>



  <tr>
    <td class="fixed text-center"><span class="border2 bold ">0807      312-16(20S)||(129)     0937</span></td>
    <td class=" text-center"><span class="line text-center bold">Red Flight Puck</span>
      <p>Flight operating in inon scheduled equipment,<span class="bold">not within</span> the same fleet<span class="br">Scheduled equipment type in brackets after flight number</span></p>
    </td>
  </tr>
  <tr>
    <td class="fixed text-center"><span class="border3 bold">1025 ||  180-16(262)     1400</span></td>
    <td class=" text-center"><span class="line text-center bold">Parallel line forward of flight number </span>
      <p>Indicates upline flight segment with same flight number,different equipment</p>
    </td>
  </tr>

  <tr>
    <td class="fixed text-center"><span class="border bold">0807      312-16||(129)     0937</span></td>
    <td class=" text-center"><span class="line text-center bold">Parallel lines behind flight number </span>
      <p>Indicates downline flight segment with same flight number,different equipment</p>
    </td>
  </tr>

  <tr>
    <td class="fixed text-center"><span class="border bold">1900 || 745-16(119)2043</span></td>
    <td class=" text-center"><span class="line text-center bold">Parallel lines both sides of flight number</span>
      <p>Indicates upline and downline flight segment with same flight number,different equipment</p>
    </td>
  </tr>




  <tr>
    <td class="fixed text-center"><span class="border bold"><span class="lavender">1525</span> 541-16(225) 1827</span>
    </td>
    <td class=" text-center"><span class="line text-center bold"><span class="lavender1"> Lavnder</span> departure tip of Flight Puck</span>
      <p>Indicates the aircraft out of gate,not airborne</p>
    </td>
  </tr>


  <tr>
    <td class="fixed text-center"><span class="border bold"><span class="orange">1525</span> 1525-16(169) 2006</span>
    </td>
    <td class=" text-center"><span class="line text-center bold"><span class="orange1">DK Orange</span> departure tip of Flight Puck</span>
      <p>Indicates the aircraft airbone</p>
    </td>
  </tr>

</table>

＆＃13;

td标签在我给出span元素的地方得到了压缩，我已经给了table-layout:fixed，也试过给出宽度但仍然没有工作。

<td class="fixed text-center"><span class="border bold">2210      924-16(267)     1030</span></td>

Answer 1

使用table{ table-layout: fixed }并为第一行行应用宽度，因为HTML解析器根据表格的第一行应用td / th宽度。

<table style="table-layout: fixed">
  <thead>
    <tr><th style="width: 500px"></th></tr>
  </thead>
  <tbody>
    <td class="fixed text-center"><span class="border bold">2210      924-16(267)     1030</span></td>
  </tbody>
</table>

调整浏览器大小时，td标记正在缩小

1 个答案: