如何在html中定义表格的宽度和高度？
如何在html中定义表格的宽度和高度？
提问于 2018-06-30 00:00:12
如何在html中定义表格的宽度和高度？以及如何改变那个链接的颜色和字体大小(用绿色覆盖字体)，我想让页面变得漂亮，project_list.html如下，非常感谢你的帮助：
{% extends 'base.html' %}
{% block content %}
<nav aria-label="breadcrumb">
</nav>
<h3 class="mb-3">我学习的课程列表</h3>
<div class="card">
<table class="table mb-0">
<thead>
<tr>
<th>课程序号</th>
<th>课程名称</th>
<th>部门名称</th>
<th>课程日期</th>
<th>课程时间</th>
<th></th>
</tr>
</thead>
<tbody>
{% for course in courses %}
<tr>
<td class="align-middle">{{ course.pk }}</td>
<td class="align-middle" style="word-break: break-all;"><a href="{% url 'employees:course_detail' course.pk%}">{{ course.name }}</a></td>
<td class="align-middle">{{ course.department.get_html_badge }}</td>
<td class="align-middle">{{ course.date }}</td>
<td class="align-middle">{{ course.time }}</td>
</tr>
{% empty %}
<tr>
<td class="bg-light text-center font-italic" colspan="4">目前没有你所选技能的课程。</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="card-footer">回答 4
Stack Overflow用户
回答已采纳
发布于 2018-06-30 00:05:12
至于宽度，我认为最简单的选择是为thead元素定义特定的宽度，如下所示
<thead>
<tr>
<th width="7%">课程序号</th>
<th width="47%">课程名称</th>
<th width="20%">部门名称</th>
<th width="10%">课程日期</th>
<th width="10%">课程时间</th>
<th width="6%"></th>
</tr>
</thead>您可以根据生成的表格改变宽度。百分比宽度总是很难调整。
至于高度，它会相应地调整。我不建议您为行分配高度，因为如果内容的长度不同，它将不会正确调整。
至于链接的颜色，我认为最简单的方法是：
<td class="align-middle" style="word-break: break-all;"><a href="{% url 'employees:course_detail' course.pk%}" style="color:blue;font-size:16px;">{{ course.name }}</a></td>如果您使用rem或em，您可以将16px替换为所需的值。
Stack Overflow用户
发布于 2018-06-30 00:11:40
使用百分比，而不是像素，例如<td height="10%">Text</td> <td width="70%">Text</td>。百分比将取决于周围的元素，您必须根据需要进行调整。
Stack Overflow用户
发布于 2018-06-30 00:25:02
要更改表格的宽度和高度，可以在html中使用colgroup。要更改颜色，只需在style元素中指定它即可。
<table>
<colgroup>
<col style="width:80px" />
<col style="width:80px" />
<col style="width:80px" />
</colgroup>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51105578
复制相关文章
相似问题
腾讯云开发者
