HTML 表格 - 对齐文本和线条

问题描述 投票：0回答：1

我正在尝试对齐表格中的文本。我希望它看起来像这个截图：enter image description here

我希望第一行带有“Arcui quam id partinuculam”以匹配我的屏幕截图，它位于以“Arcu”开头的行的正上方。

目前我有：

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head><meta charset="UTF-8">


</head>
<body><!--Make the whole page a table so the <thead> acts as the header-->
       
             
        
<table>
  <tbody>

  <tr>
      <td colspan="5"><span>Arcui quam id partinuculam </span></td>
     <td style="border-bottom:1px black solid;width:400px;height:40px">&nbsp;</td>
  </tr>

  <tr>
      <td style="height:40px;vertical-align: bottom;text-align:left;">Arcu</td>
      <td style="border-bottom:1px black solid;width:400px;height:40px">&nbsp;</td>
      <td colspan="4" style="height:40px;vertical-align: bottom;text-align:left;" >, partium ut proponit conditione ad molunt donec</td>
   
  </tr>
  <tr>
      <td style="height:40px;vertical-align: bottom;text-align:left;">Nihil</td>
      <td style="border-bottom:1px black solid;width:400px;height:40px">&nbsp;</td>
      <td style="height:40px;vertical-align: bottom;text-align:left;">Elucescunt</td>
      <td style="border-bottom:1px black solid;width:400px;height:40px">&nbsp;</td>
  </tr>
  <tr>
      <td style="height:40px;vertical-align: bottom;text-align:left;">Opiniones </td>
      <td style="border-bottom:1px black solid;width:400px;height:40px">&nbsp;</td>
  </tr>
  <tr>
      <td style="height:40px;vertical-align: bottom;text-align:left;">Erat </td>
      <td style="border-bottom:1px black solid;width:400px;height:40px">&nbsp;</td>
  </tr>

</tbody>
</table>

  

</body>
</html>

有人向我建议，要使其看起来像我想要的方式，取决于表格的宽度和列/单元格的宽度。表格似乎太窄，无法容纳完整的句子和行。

有人知道我需要在 HTML 中更改什么才能使其正常工作吗？

html-table
1个回答
0
投票

虽然我还没有达到所需的确切格式，但我正在分享仍然采用表格格式（而不是内联块）的更新版本。

td{width:25%}
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head><meta charset="UTF-8">

</head>
<body><!--Make the whole page a table so the <thead> acts as the header-->


<table width="940" height = "50" table-layout = "auto">

    
  <tr>
    <td colspan="1" style="width: 340px; vertical-align: bottom;text-align:left">Arcui quam id partinuculam</td>
     <td colspan="1" style= "width: 550px; border-bottom:1px black solid;height:40px; bottom;text-align:left">&nbsp;</td>
       
  </tr>

  <tr>
      <td style="width:340px; height:40px;vertical-align: bottom;text-align:left;">Arcu</td>
      <td style="border-bottom:1px black solid;height:40px">&nbsp;</td>
      <td colspan="4" style="width:550px; height:40px;vertical-align: bottom;text-align:left">, partium ut proponit conditione ad molunt donec</td>

  </tr>
  <tr>
      <td style="width:100px; height:40px; vertical-align: bottom;text-align:left">Nihil</td>
      <td style="width:300px; height:40px; border-bottom:1px black solid">&nbsp;</td>
      <td style="width:100px; height:40px;vertical-align: bottom;text-align:left">Elucescunt</td>
      <td style="width:440px; height:40px; border-bottom:1px black solid">&nbsp;</td>
  </tr>
  <tr>
      <td style="height:40px;vertical-align: bottom;text-align:left;">Opiniones</td>
      <td style="border-bottom:1px black solid;width:400px;height:40px">&nbsp;</td>
  </tr>
  <tr>
      <td style="height:40px;vertical-align: bottom;text-align:left;">Erat</td>
      <td style="border-bottom:1px black solid;width:400px;height:40px">&nbsp;</td>
  </tr>

</table>



</body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.