html表行高度问题

Question

好吧所以我把那张桌子做成了我想要它看起来像一本成绩簿，但我不能编辑行高。

在下面的图片中，我在行周围画了一条线，我希望它们的大小减小，以便它们看起来与学生的行不同。

并且继承了HTML

＆＃13;

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-12 table-responsive">
  <table class="table table-bordered" style="background-color:white;">
	<tbody>
		<tr>
			<th rowspan="4">Student</th>
			<th>Assignment</th>
			<td>Assignment 1</td>
			<td>Assignment 2</td>
			<td>Assignment 3</td>
			<td>Assignment 4</td>

		</tr>
    <div>
		<tr>
			<th>Category:</th>
			<td>Category 1</td>
			<td>Category 2</td>
			<td>Category 3</td>
			<td>Category 4</td>
		</tr></div>
		<tr>
			<th>Due:</th>
			<td>Due 1</td>
			<td>Due 2</td>
			<td>Due 3</td>
			<td>Due 4</td>
		</tr>
		<tr>
			<th>Points:</th>
			<td>1</td>
			<td>2</td>
			<td>3</td>
			<td>4</td>
		</tr>
		<tr>
			<td>Moemen Waleed</td>
			<td>90% A-</td>
			<td>Moemen 1</td>
			<td>Moemen 2</td>
			<td>Moemen 3</td>
			<td>Moemen 4</td>
		</tr>
		<tr>
			<td>Mazen Waleed</td>
			<td>93% A</td>
			<td>Mazen 1</td>
			<td>Mazen 2</td>
			<td>Mazen 3</td>
			<td>Mazen 4</td>
		</tr>
	</tbody>
</table>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

将此样式添加到您的hmtl：

<style>
  tr:nth-child(-n+4){
     line-height: 10px;
     min-height: 10px;
     height: 10px;
  }
</style>

这会为表格中的前四行设置样式。 结果如下：https://jsfiddle.net/Lbx8xh1a/4/

Answer 2

您可以将line-height添加到<tr>个代码。

＆＃13;

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="col-lg-12 table-responsive">
      <table class="table table-bordered" style="background-color:white;">
        <tbody>
            <tr style="line-height: 6px;">
                <th rowspan="4">Student</th>
                <th>Assignment</th>
                <td>Assignment 1</td>
                <td>Assignment 2</td>
                <td>Assignment 3</td>
                <td>Assignment 4</td>
    
            </tr>
        <div>
            <tr style="line-height: 6px;">
                <th>Category:</th>
                <td>Category 1</td>
                <td>Category 2</td>
                <td>Category 3</td>
                <td>Category 4</td>
            </tr></div>
            <tr style="line-height: 6px;">
                <th>Due:</th>
                <td>Due 1</td>
                <td>Due 2</td>
                <td>Due 3</td>
                <td>Due 4</td>
            </tr>
            <tr style="line-height: 6px;">
                <th>Points:</th>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <td>Moemen Waleed</td>
                <td>90% A-</td>
                <td>Moemen 1</td>
                <td>Moemen 2</td>
                <td>Moemen 3</td>
                <td>Moemen 4</td>
            </tr>
            <tr>
                <td>Mazen Waleed</td>
                <td>93% A</td>
                <td>Mazen 1</td>
                <td>Mazen 2</td>
                <td>Mazen 3</td>
                <td>Mazen 4</td>
            </tr>
        </tbody>
    </table>
    </div>

＆＃13;

＆＃13;

＆＃13;