float：left 在 HTML CSS 中对我不起作用

float:left not working for me in HTML CSS

提问人：Dennis 提问时间：8/29/2023 最后编辑：j08691Dennis 更新时间：8/29/2023 访问量：27

问：

我开发了一个脚本来呈现一个活跃的 YouTube 聊天以及聊天中谁的摘要。这个想法是聊天项目表将显示在聊天成员列表的右侧。但是，在最新版本的 Safari 和 Chrome 中，浮动似乎不起作用，并且表格一个接一个地显示。这是生成的 HTML 的示例摘录，它有问题。

body {
  background-image: '/bg-standard.jpg';
  background-attachment: fixed;
}

.twoTables {
  margin-left: -5px;
  margin-right: -5px;
}

.tableLeft {
  float: left;
  width: 50%;
  padding: 5px;
}

.tableRight {
  float: left;
  width: 50%;
  padding: 5px;
}

.twoTables::after {
  content: "";
  clear: both;
  display: table;
}

headingLink {
  color: white;
  text-decoration: none;
}

.dummyRow {
  line-height: 1px;
  visibility: hidden;
}

.freeze-table {
  border-spacing: 0;
  border-collapse: collapse;
  padding: 0;
}

thead th {
  top: 0;
  position: sticky;
  background-color: #666;
  color: #fff;
  z-index: 20;
  min-height: 30px;
  height: 30px;
  text-align: left;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

xth,
xtd {
  padding: 0 5px;
  border-collapse: collapse;
  font-size: 100%;
  outline: 1px solid #ccc;
  border: none;
  outline-offset: -1px;
  padding-left: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

th,
td {
  padding: 0 0px;
  border-collapse: collapse;
  font-size: 100%;
  border: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 5px;
}

tr {
  min-height: 25px;
  height: 25px;
  background-color: #ffffff
}

pageElement {
  display: flex;
  flex-wrap: nowrap;
  align-items: center
}

a:link {
  color: white;
  text-decoration: none;
}

* {
  padding: 0;
  margin: 0;
}

.fit {
  /* set relative picture size */
  max-width: 100%;
  max-height: 100%;
}

.center {
  display: block;
  margin: auto;
}

.imgbox {
  display: grid;
  width: 100%;
}

.center-fit {
  max-width: 100%;
  max-height: 100vh;
  margin: auto;
}

@media screen and (max-width: 600px) {
  .tableLeft {
    width: 100%;
  }
  .tableRight {
    width: 100%;
  }
}
<form method='POST' action=/ YouTube/latestChats.php>
  <table style='border-collapse:collapse;'>
    <tr>
      <td><input type='checkbox' name='highlightMsg' id='highlightMsg' checked>
        <label for='highlightMsg'>Highlight messages</label></td>
      <td><input type='checkbox' name='msgUseRegEx' id='msgUseRegEx'>
        <label for='msgUseRegEx'>Use REGEX</label></td>
      <td>Message filter</td>
      <td><input type='text' name='msg' value='request' size=30></td>
    </tr>
    <tr>
      <td><input type='checkbox' name='invertOrder' id='invertOrder' checked>
        <label for='invertOrder'>Latest first</label></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>
        <input type='radio' name='emoteMgmt' value='text'>&nbsp;Emoticons&nbsp;as&nbsp;text&nbsp;&nbsp;&nbsp;&nbsp;
        <input type='radio' name='emoteMgmt' checked value='icon'>&nbsp;Emoticons&nbsp;as&nbsp;image&nbsp;&nbsp;&nbsp;&nbsp;
        <input type='radio' name='emoteMgmt' value='strip'>&nbsp;Strip&nbsp;emoticons&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      </td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
  <br>
  <input type='submit' name='submit' value='Submit'> &nbsp;&nbsp;&nbsp;
  <input type='submit' name='backToYouTubeStuff' value='Go Back'>
  <br>
</form>
<br>
<div class='twoTables'>
  <div id='watchers' class='tableLeft'>
    <table>
      <tr>
        <th>Watcher</th>
        <th>*</th>
        <th>Joined</th>
        <th>Latest</th>
      </tr>
      <tr>
        <td>request</td>
        <td>*</td>
        <td>07:47</td>
        <td>1805.0m</td>
      </tr>
      <tr>
        <td>Joe Something - guru</td>
        <td>*</td>
        <td>07:44</td>
        <td>1805.2m</td>
      </tr>
      <tr>
        <td>(<span style="font-weight:bold; font-style:italic;">Tony</span>) Tropic</td>
        <td>*</td>
        <td>06:48</td>
        <td>1839.9m</td>
      </tr>
    </table>
  </div>
  <div id='chats' class='tableRight'>
    <table style='border-collapse:collapse;border:0px solid white;'>
      <tr style='color:white; border:0px;'>
        <td colspan=3 style='text-align:center;background-color:darkblue;color:white;font-size:115%;font-weight:bold;border:solid white;'>2023-08-27</td>
        <td colspan=2 style='background-color:darkblue;color:white;font-size:115%;font-weight:bold;border:solid white;'><a href='https://youtu.be/ForShow'>2023-08-27 Livestream Title (23-074)</a></td>
      </tr>

      <tr>
        <td style='text-align:right;color:Blue;'>1</td>
        <td style='text-align:center;color:Blue;'>07:47</td>
        <td style='text-align:right;color:Blue;'>(58:51)</td>
        <td style='text-align:left;color:Blue;'>Tropic</td>
        <td style='text-align:left;color:Blue;'>
          <a style='color:blue;text-decoration:none;' href='https://youtu.be/ForShow?t=3531' target='_blank'>_&nbsp;
               Ty dad</a></td>
      </tr>
      <tr>
        <td style='text-align:right;color:Blue;'>2</td>
        <td style='text-align:center;color:Blue;'>07:47</td>
        <td style='text-align:right;color:Blue;'>(58:41)</td>
        <td style='text-align:left;color:Blue;'>Joe Something</td>
        <td style='text-align:left;color:Blue;'>
          <a style='color:blue;text-decoration:none;' href='https://youtu.be/ForShow?t=3521' target='_blank'>_&nbsp;
               c ya guys</a></td>
      </tr>
      <tr>
        <td style='text-align:right;color:Blue;'>3</td>
        <td style='text-align:center;color:Blue;'>07:47</td>
        <td style='text-align:right;color:Blue;'>(58:37)</td>
        <td style='text-align:left;color:Blue;'>request</td>
        <td style='text-align:left;color:Blue;'>
          <a style='color:blue;text-decoration:none;' href='https://youtu.be/ForShow?t=3517' target='_blank'>_&nbsp;
               Sold it Brad</a></td>
      </tr>
      <tr>
        <td style='text-align:right;color:Blue;'>5</td>
        <td style='text-align:center;color:Blue;'>07:46</td>
        <td style='text-align:right;color:Blue;'>(58:28)</td>
        <td style='text-align:left;color:Blue;'>Silent Chatter</td>
        <td style='text-align:left;color:Blue;'>
          <a style='color:blue;text-decoration:none;' href='https://youtu.be/ForShow?t=3508' target='_blank'>_&nbsp;
               HAPPY Bday Son</a></td>
      </tr>
      <tr>
        <td style='text-align:right;color:Blue;'>6</td>
        <td style='text-align:center;color:Blue;'>07:46</td>
        <td style='text-align:right;color:Blue;'>(58:27)</td>
        <td style='text-align:left;color:Blue;'>request</td>
        <td style='text-align:left;color:Blue;'>
          <a style='color:blue;text-decoration:none;' href='https://youtu.be/ForShow?t=3507' target='_blank'>_&nbsp;
               good job george</a></td>
      </tr>
      <tr>
        <td style='text-align:right;color:Blue;'>7</td>
        <td style='text-align:center;color:Blue;'>07:46</td>
        <td style='text-align:right;color:Blue;'>(58:23)</td>
        <td style='text-align:left;color:Blue;'>Danny Incognito</td>
        <td style='text-align:left;color:Blue;'>
          <a style='color:blue;text-decoration:none;' href='https://youtu.be/ForShow?t=3503' target='_blank'>_&nbsp;
               bye bye guys</a></td>
      </tr>
      <tr>
        <th colspan=5 style='background-color: #666 ;color: #fff ;z-index: 20 ;min-height: 30px ;height: 30px ;text-align: left ;'>End of data. </th>
      </tr>
    </table>
  </div>
</div>

我已经搜索了类似问题的解决方案，但似乎没有一个与我的问题完全匹配，除了这个。对于这个问题，我对公认的答案有两个问题（“你需要将文本包装在 div 中并向左浮动，而包装器 div 应该有高度...... ）： （1） 我的代码已经被 并指定 float;（2）我没有看到我必须指定高度的证据。我认为这是问题的另一种变体。然后有一个讨厌的评论，即公认的答案不起作用。

我在这里是否在使浮动工作方面做错了什么？我什么也没看到。

注意：这里定义了许多样式属性，但未使用。实际的成品不仅仅是这一对桌子。

感谢您的任何见解。

HTML 表格 css-float

评论

答：

1赞 j08691 8/29/2023 #1

删除表格容器上的 50% 宽度，或将 box-sizing 设置为 border-box。表格将按原样浮动，但按原样设置宽度后，它们太宽并换行。

示例 1

body {
  background-image: '/bg-standard.jpg';
  background-attachment: fixed;
}

.twoTables {
  margin-left: -5px;
  margin-right: -5px;
}

.tableLeft {
  float: left;
  xwidth: 50%;
  padding: 5px;
}

.tableRight {
  float: left;
  width: 50%;
  padding: 5px;
}

.twoTables::after {
  content: "";
  clear: both;
  display: table;
}

headingLink {
  color: white;
  text-decoration: none;
}

.dummyRow {
  line-height: 1px;
  visibility: hidden;
}

.freeze-table {
  border-spacing: 0;
  border-collapse: collapse;
  padding: 0;
}

thead th {
  top: 0;
  position: sticky;
  background-color: #666;
  color: #fff;
  z-index: 20;
  min-height: 30px;
  height: 30px;
  text-align: left;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

xth,
xtd {
  padding: 0 5px;
  border-collapse: collapse;
  font-size: 100%;
  outline: 1px solid #ccc;
  border: none;
  outline-offset: -1px;
  padding-left: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

th,
td {
  padding: 0 0px;
  border-collapse: collapse;
  font-size: 100%;
  border: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 5px;
}

tr {
  min-height: 25px;
  height: 25px;
  background-color: #ffffff
}

pageElement {
  display: flex;
  flex-wrap: nowrap;
  align-items: center
}

a:link {
  color: white;
  text-decoration: none;
}

* {
  padding: 0;
  margin: 0;
}

.fit {
  /* set relative picture size */
  max-width: 100%;
  max-height: 100%;
}

.center {
  display: block;
  margin: auto;
}

.imgbox {
  display: grid;
  width: 100%;
}

.center-fit {
  max-width: 100%;
  max-height: 100vh;
  margin: auto;
}

@media screen and (max-width: 600px) {
  .tableLeft {
    width: 100%;
  }
  .tableRight {
    width: 100%;
  }
}
<form method='POST' action=/ YouTube/latestChats.php>
  <table style='border-collapse:collapse;'>
    <tr>
      <td><input type='checkbox' name='highlightMsg' id='highlightMsg' checked>
        <label for='highlightMsg'>Highlight messages</label></td>
      <td><input type='checkbox' name='msgUseRegEx' id='msgUseRegEx'>
        <label for='msgUseRegEx'>Use REGEX</label></td>
      <td>Message filter</td>
      <td><input type='text' name='msg' value='request' size=30></td>
    </tr>
    <tr>
      <td><input type='checkbox' name='invertOrder' id='invertOrder' checked>
        <label for='invertOrder'>Latest first</label></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>
        <input type='radio' name='emoteMgmt' value='text'>&nbsp;Emoticons&nbsp;as&nbsp;text&nbsp;&nbsp;&nbsp;&nbsp;
        <input type='radio' name='emoteMgmt' checked value='icon'>&nbsp;Emoticons&nbsp;as&nbsp;image&nbsp;&nbsp;&nbsp;&nbsp;
        <input type='radio' name='emoteMgmt' value='strip'>&nbsp;Strip&nbsp;emoticons&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      </td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
  <br>
  <input type='submit' name='submit' value='Submit'> &nbsp;&nbsp;&nbsp;
  <input type='submit' name='backToYouTubeStuff' value='Go Back'>
  <br>
</form>
<br>
<div class='twoTables'>
  <div id='watchers' class='tableLeft'>
    <table>
      <tr>
        <th>Watcher</th>
        <th>*</th>
        <th>Joined</th>
        <th>Latest</th>
      </tr>
      <tr>
        <td>request</td>
        <td>*</td>
        <td>07:47</td>
        <td>1805.0m</td>
      </tr>
      <tr>
        <td>Joe Something - guru</td>
        <td>*</td>
        <td>07:44</td>
        <td>1805.2m</td>
      </tr>
      <tr>
        <td>(<span style="font-weight:bold; font-style:italic;">Tony</span>) Tropic</td>
        <td>*</td>
        <td>06:48</td>
        <td>1839.9m</td>
      </tr>
    </table>
  </div>
  <div id='chats' class='tableRight'>
    <table style='border-collapse:collapse;border:0px solid white;'>
      <tr style='color:white; border:0px;'>
        <td colspan=3 style='text-align:center;background-color:darkblue;color:white;font-size:115%;font-weight:bold;border:solid white;'>2023-08-27</td>
        <td colspan=2 style='background-color:darkblue;color:white;font-size:115%;font-weight:bold;border:solid white;'><a href='https://youtu.be/ForShow'>2023-08-27 Livestream Title (23-074)</a></td>
      </tr>

      <tr>
        <td style='text-align:right;color:Blue;'>1</td>
        <td style='text-align:center;color:Blue;'>07:47</td>
        <td style='text-align:right;color:Blue;'>(58:51)</td>
        <td style='text-align:left;color:Blue;'>Tropic</td>
        <td style='text-align:left;color:Blue;'>
          <a style='color:blue;text-decoration:none;' href='https://youtu.be/ForShow?t=3531' target='_blank'>_&nbsp;
               Ty dad</a></td>
      </tr>
      <tr>
        <td style='text-align:right;color:Blue;'>2</td>
        <td style='text-align:center;color:Blue;'>07:47</td>
        <td style='text-align:right;color:Blue;'>(58:41)</td>
        <td style='text-align:left;color:Blue;'>Joe Something</td>
        <td style='text-align:left;color:Blue;'>
          <a style='color:blue;text-decoration:none;' href='https://youtu.be/ForShow?t=3521' target='_blank'>_&nbsp;
               c ya guys</a></td>
      </tr>
      <tr>
        <td style='text-align:right;color:Blue;'>3</td>
        <td style='text-align:center;color:Blue;'>07:47</td>
        <td style='text-align:right;color:Blue;'>(58:37)</td>
        <td style='text-align:left;color:Blue;'>request</td>
        <td style='text-align:left;color:Blue;'>
          <a style='color:blue;text-decoration:none;' href='https://youtu.be/ForShow?t=3517' target='_blank'>_&nbsp;
               Sold it Brad</a></td>
      </tr>
      <tr>
        <td style='text-align:right;color:Blue;'>5</td>
        <td style='text-align:center;color:Blue;'>07:46</td>
        <td style='text-align:right;color:Blue;'>(58:28)</td>
        <td style='text-align:left;color:Blue;'>Silent Chatter</td>
        <td style='text-align:left;color:Blue;'>
          <a style='color:blue;text-decoration:none;' href='https://youtu.be/ForShow?t=3508' target='_blank'>_&nbsp;
               HAPPY Bday Son</a></td>
      </tr>
      <tr>
        <td style='text-align:right;color:Blue;'>6</td>
        <td style='text-align:center;color:Blue;'>07:46</td>
        <td style='text-align:right;color:Blue;'>(58:27)</td>
        <td style='text-align:left;color:Blue;'>request</td>
        <td style='text-align:left;color:Blue;'>
          <a style='color:blue;text-decoration:none;' href='https://youtu.be/ForShow?t=3507' target='_blank'>_&nbsp;
               good job george</a></td>
      </tr>
      <tr>
        <td style='text-align:right;color:Blue;'>7</td>
        <td style='text-align:center;color:Blue;'>07:46</td>
        <td style='text-align:right;color:Blue;'>(58:23)</td>
        <td style='text-align:left;color:Blue;'>Danny Incognito</td>
        <td style='text-align:left;color:Blue;'>
          <a style='color:blue;text-decoration:none;' href='https://youtu.be/ForShow?t=3503' target='_blank'>_&nbsp;
               bye bye guys</a></td>
      </tr>
      <tr>
        <th colspan=5 style='background-color: #666 ;color: #fff ;z-index: 20 ;min-height: 30px ;height: 30px ;text-align: left ;'>End of data. </th>
      </tr>
    </table>
  </div>
</div>

示例 2

* {
  box-sizing: border-box;
}

body {
  background-image: '/bg-standard.jpg';
  background-attachment: fixed;
}

.twoTables {
  margin-left: -5px;
  margin-right: -5px;
}

.tableLeft {
  float: left;
  width: 50%;
  padding: 5px;
}

.tableRight {
  float: left;
  width: 50%;
  padding: 5px;
}

.twoTables::after {
  content: "";
  clear: both;
  display: table;
}

headingLink {
  color: white;
  text-decoration: none;
}

.dummyRow {
  line-height: 1px;
  visibility: hidden;
}

.freeze-table {
  border-spacing: 0;
  border-collapse: collapse;
  padding: 0;
}

thead th {
  top: 0;
  position: sticky;
  background-color: #666;
  color: #fff;
  z-index: 20;
  min-height: 30px;
  height: 30px;
  text-align: left;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

xth,
xtd {
  padding: 0 5px;
  border-collapse: collapse;
  font-size: 100%;
  outline: 1px solid #ccc;
  border: none;
  outline-offset: -1px;
  padding-left: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

th,
td {
  padding: 0 0px;
  border-collapse: collapse;
  font-size: 100%;
  border: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 5px;
}

tr {
  min-height: 25px;
  height: 25px;
  background-color: #ffffff
}

pageElement {
  display: flex;
  flex-wrap: nowrap;
  align-items: center
}

a:link {
  color: white;
  text-decoration: none;
}

* {
  padding: 0;
  margin: 0;
}

.fit {
  /* set relative picture size */
  max-width: 100%;
  max-height: 100%;
}

.center {
  display: block;
  margin: auto;
}

.imgbox {
  display: grid;
  width: 100%;
}

.center-fit {
  max-width: 100%;
  max-height: 100vh;
  margin: auto;
}

@media screen and (max-width: 600px) {
  .tableLeft {
    width: 100%;
  }
  .tableRight {
    width: 100%;
  }
}
<form method='POST' action=/ YouTube/latestChats.php>
  <table style='border-collapse:collapse;'>
    <tr>
      <td><input type='checkbox' name='highlightMsg' id='highlightMsg' checked>
        <label for='highlightMsg'>Highlight messages</label></td>
      <td><input type='checkbox' name='msgUseRegEx' id='msgUseRegEx'>
        <label for='msgUseRegEx'>Use REGEX</label></td>
      <td>Message filter</td>
      <td><input type='text' name='msg' value='request' size=30></td>
    </tr>
    <tr>
      <td><input type='checkbox' name='invertOrder' id='invertOrder' checked>
        <label for='invertOrder'>Latest first</label></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>
        <input type='radio' name='emoteMgmt' value='text'>&nbsp;Emoticons&nbsp;as&nbsp;text&nbsp;&nbsp;&nbsp;&nbsp;
        <input type='radio' name='emoteMgmt' checked value='icon'>&nbsp;Emoticons&nbsp;as&nbsp;image&nbsp;&nbsp;&nbsp;&nbsp;
        <input type='radio' name='emoteMgmt' value='strip'>&nbsp;Strip&nbsp;emoticons&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      </td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
  <br>
  <input type='submit' name='submit' value='Submit'> &nbsp;&nbsp;&nbsp;
  <input type='submit' name='backToYouTubeStuff' value='Go Back'>
  <br>
</form>
<br>
<div class='twoTables'>
  <div id='watchers' class='tableLeft'>
    <table>
      <tr>
        <th>Watcher</th>
        <th>*</th>
        <th>Joined</th>
        <th>Latest</th>
      </tr>
      <tr>
        <td>request</td>
        <td>*</td>
        <td>07:47</td>
        <td>1805.0m</td>
      </tr>
      <tr>
        <td>Joe Something - guru</td>
        <td>*</td>
        <td>07:44</td>
        <td>1805.2m</td>
      </tr>
      <tr>
        <td>(<span style="font-weight:bold; font-style:italic;">Tony</span>) Tropic</td>
        <td>*</td>
        <td>06:48</td>
        <td>1839.9m</td>
      </tr>
    </table>
  </div>
  <div id='chats' class='tableRight'>
    <table style='border-collapse:collapse;border:0px solid white;'>
      <tr style='color:white; border:0px;'>
        <td colspan=3 style='text-align:center;background-color:darkblue;color:white;font-size:115%;font-weight:bold;border:solid white;'>2023-08-27</td>
        <td colspan=2 style='background-color:darkblue;color:white;font-size:115%;font-weight:bold;border:solid white;'><a href='https://youtu.be/ForShow'>2023-08-27 Livestream Title (23-074)</a></td>
      </tr>

      <tr>
        <td style='text-align:right;color:Blue;'>1</td>
        <td style='text-align:center;color:Blue;'>07:47</td>
        <td style='text-align:right;color:Blue;'>(58:51)</td>
        <td style='text-align:left;color:Blue;'>Tropic</td>
        <td style='text-align:left;color:Blue;'>
          <a style='color:blue;text-decoration:none;' href='https://youtu.be/ForShow?t=3531' target='_blank'>_&nbsp;
               Ty dad</a></td>
      </tr>
      <tr>
        <td style='text-align:right;color:Blue;'>2</td>
        <td style='text-align:center;color:Blue;'>07:47</td>
        <td style='text-align:right;color:Blue;'>(58:41)</td>
        <td style='text-align:left;color:Blue;'>Joe Something</td>
        <td style='text-align:left;color:Blue;'>
          <a style='color:blue;text-decoration:none;' href='https://youtu.be/ForShow?t=3521' target='_blank'>_&nbsp;
               c ya guys</a></td>
      </tr>
      <tr>
        <td style='text-align:right;color:Blue;'>3</td>
        <td style='text-align:center;color:Blue;'>07:47</td>
        <td style='text-align:right;color:Blue;'>(58:37)</td>
        <td style='text-align:left;color:Blue;'>request</td>
        <td style='text-align:left;color:Blue;'>
          <a style='color:blue;text-decoration:none;' href='https://youtu.be/ForShow?t=3517' target='_blank'>_&nbsp;
               Sold it Brad</a></td>
      </tr>
      <tr>
        <td style='text-align:right;color:Blue;'>5</td>
        <td style='text-align:center;color:Blue;'>07:46</td>
        <td style='text-align:right;color:Blue;'>(58:28)</td>
        <td style='text-align:left;color:Blue;'>Silent Chatter</td>
        <td style='text-align:left;color:Blue;'>
          <a style='color:blue;text-decoration:none;' href='https://youtu.be/ForShow?t=3508' target='_blank'>_&nbsp;
               HAPPY Bday Son</a></td>
      </tr>
      <tr>
        <td style='text-align:right;color:Blue;'>6</td>
        <td style='text-align:center;color:Blue;'>07:46</td>
        <td style='text-align:right;color:Blue;'>(58:27)</td>
        <td style='text-align:left;color:Blue;'>request</td>
        <td style='text-align:left;color:Blue;'>
          <a style='color:blue;text-decoration:none;' href='https://youtu.be/ForShow?t=3507' target='_blank'>_&nbsp;
               good job george</a></td>
      </tr>
      <tr>
        <td style='text-align:right;color:Blue;'>7</td>
        <td style='text-align:center;color:Blue;'>07:46</td>
        <td style='text-align:right;color:Blue;'>(58:23)</td>
        <td style='text-align:left;color:Blue;'>Danny Incognito</td>
        <td style='text-align:left;color:Blue;'>
          <a style='color:blue;text-decoration:none;' href='https://youtu.be/ForShow?t=3503' target='_blank'>_&nbsp;
               bye bye guys</a></td>
      </tr>
      <tr>
        <th colspan=5 style='background-color: #666 ;color: #fff ;z-index: 20 ;min-height: 30px ;height: 30px ;text-align: left ;'>End of data. </th>
      </tr>
    </table>
  </div>
</div>

评论

1赞 Dennis 8/29/2023
非常好。解决了我的问题。我去掉了 50% 的宽度。我仍然在努力知道HTML何时会扩展，什么时候不会。 我能确定的是，我的代码中没有绝对的大小，但事情可能会溢出。对我来说很奇怪。这很重要，因为我接下来要做的就是在右边的桌子周围放一个盒子，然后滚动它。（左边的那个预计不会超过 20 英寸。无论如何，这都是没有意义的。感谢您提供出色而简单的解决方案！

上一个：为什么浮点属性不适用于图像和段落？

下一个：BigCommerce PHP hello world应用程序安装错误与silex