Question

我一直试图找到一张与我研究过的图片类似的表格。看起来像：

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

这就是我所做的：

然而我遇到的问题是：

粗体文字下的下划线，我设法只得到一个我希望在整行中得到的小文字
此外，我想调整表格的大小，使其像第一张图片一样卡住。我不知道我现在是否采取了正确的方法，但我认为我是正确的。也许这里有人可以帮我看看这个问题。

  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作为整个宽度。

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

预览

Answer 2

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

<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;
 }

表格宽度也已调整。因此删除了内嵌CSS样式，并将其添加到table css：

width: 70%;

Here is the JSFiddle demo

HTML - 文本后面的下划线和＆amp;调整桌面大小

2 个答案: