如何解决CSS不会像在另一个问题中一样改变表格的宽度
Table cell width with bootstrap
我正在尝试遵循这些指示,但是我的CSS却无能为力。有什么想法吗?第一列中的URL可能很长,因此我想缩小框的宽度。我全神贯注,以供参考。
/* Trying to shrink first column of URL table doesn't work */
#urltable tr td:nth-child(1){
width:10%;
}
<html lang="en">
<head>
{% if title %}
<title>Dog: {{ title }}</title>
{% else %}
<title>Dog</title>
{% endif %}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!--My styles sheet -->
<link rel="stylesheet" type="text/css" href="{{ url_for('.static',filename='styles.css') }}">
<!-- My Java Scripts -->
<script src="{{ url_for('.static',filename='js/moment.min.js') }}"></script>
<!-- Script from server for moment text generator -->
<script src="{{ url_for('.static',filename='scripts.js') }}"></script>
</head>
<body>
<div class="container">
<div class="well">
<h1>{{ display.username }}</h1>
<table class="table table-dark table-hover" id="urltable">
<thead>
<tr>
<th scope="col">URL</th>
<th scope="col">Title</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
{% for link in display.links %}
<tr>
<td scope="col" width="10%"><a href="{{ link.link }}">{{ link.link }}</a></td>
<td scope="col">{{ link.title }}</td>
<td scope="col"><button class="btn btn-default",id="removeLink{{ link.id }}" onClick="removeLink(this.id)">Remove Link</button></td>
</tr>
{% endfor %}
</tbody>
</table>
<form method="post">
{{ linkForm.hidden_tag() }}
<fieldset>
<div class="col-sm-4">
{{ linkForm.url(class="form-control",placeholder="URL") }}
{% for error in linkForm.url.errors %}
<span class="help-inline">[{{ error }}]</span><br>
{% endfor %}
</div>
<div class="form-group col-sm-4">
{{ linkForm.title(class="form-control",placeholder="Title to Display") }}
{% for error in linkForm.title.errors %}
<span class="help-inline">[{{ error }}]</span><br>
{% endfor %}
</div>
<div class="form-group col-sm-4">
<button class="btn btn-default" id="display{{ display.id }}" onClick="addLink(this.id)">Add Link</button>
</div>
</fieldset>
</form>
</div>
</div>
</body>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。