HTML

Question

我一直在努力寻找与我研究过的图片相似的 table。看起来像：

但是我得到了类似的东西：

这是我所做的：

但是我在以下方面遇到了问题：

粗体文本下的下划线，我设法只得到一个我希望在整行中得到的小文本
我还想调整 table 的大小，让它像第一张图片一样卡住。我不知道我现在的做法是否正确，但我认为我的做法是正确的。也许这里有人可以帮我解决这个问题。

  table {
        border: 1px solid black;
        background-color: #ffcc99;
    }

    tr.hello {
       background-color: #000000;
       color: #ffffff;
    }

    tr.bigtext {
        font-weight: bold;
    }
    </style>
    </head>
    <body>

    <h5>Tabell 2</h5>

    <table style="width:100%">
     <tr class="bigtext">
        <td><u>Studenter</u></td>
        <td><u>17000</u></td>
      </tr>
      <tr>
        <td>Högskoleingejör</td>
        <td>2800</td>
      </tr>
      <tr>
        <td>Ekonomi</td>
        <td>1800</td>
      </tr>
      <tr>
        <td>Fristående kurser</td>
        <td>8300</td>
      </tr>
      <tr class="hello">
        <td>Cirka 600 utländska studenter ingår i det totaala antalet studenter</td>
      </tr>
    </table>

    </body>
    </html>

Answer 1

你几乎都做对了，除了你应该：

不要在边框的东西下划线。
不使用 <u> 标签。
使用全宽的 colspan。

而且您的代码似乎不完整。这是您的更新代码：

table {
  border: 1px solid black;
  background-color: #ffcc99;
}

tr.hello {
  background-color: #000000;
  color: #ffffff;
}

tr.bigtext td {
  font-weight: bold;
  border-bottom: 1px solid #000;
}

<h5>Tabell 2</h5>
<table style="width:100%">
  <tr class="bigtext">
    <td>Studenter</td>
    <td>17000</td>
  </tr>
  <tr>
    <td>Högskoleingejör</td>
    <td>2800</td>
  </tr>
  <tr>
    <td>Ekonomi</td>
    <td>1800</td>
  </tr>
  <tr>
    <td>Fristående kurser</td>
    <td>8300</td>
  </tr>
  <tr class="hello">
    <td colspan="2">Cirka 600 utländska studenter ingår i det totaala antalet studenter</td>
  </tr>
</table>

预览

Answer 2

我就是这样做的。我在 bigtext tr class 下添加了以下内容：

<tr class="underline">
    <td class="underline" colspan="2"></td>
</tr>

我添加了以下 CSS 来修复字体和下划线：

 .underline {
   border-top: solid 1px black;
 }


tr:not(.bigtext) td:first-child{
       font-family: Papyrus, fantasy;
 }

 tr:not(.bigtext) td:not(first-child){
       font-family: Georgia;
 }

 tr.bigtext td:not(first-child){
       font-family: Georgia;
 }

table宽度也进行了调整。所以删除了 in-line CSS 样式，并将其添加到您的 table css:

width: 70%;

Here is the JSFiddle demo

HTML - 文本后加下划线并在 table 上调整大小

HTML - Underscore line after a text & adjust Size on table

css

html-table

border