设置table宽度未生效

Question

我有一个 table，我正在尝试将宽度设置为我的列。

<!-- Start Styles. Move the 'style' tags and everything between them to between the 'head' tags -->
<style type="text/css">
    .myTable { width: 500px; }
    .myTable { background-color:#eee;border-collapse:collapse; }
    .myTable th { background-color:#000;color:white;width:50%; }
    .myTable td, .myTable th { padding:5px;border:1px solid #000; }
</style>

<!-- End Styles -->
<table class="myTable">


    <thead>
        <th width="5%">#</th>
        <th width="55%">Link</th>
        <th width="40%">Description</th>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>{{ env('APP_URL') }}/baby/{{ $baby->id }}?code={{ $baby->readOnlyCode }}</td>
            <td><p>You can open this Admin link on any devices that connect to your TV as dashboard.</p></td>
        </tr>
        <tr>
            <td>2</td>
            <td>{{ env('APP_URL') }}/baby/{{ $baby->id }}?code={{ $baby->readOnlyCode }}</td>
            <td><p>You may share this Read-Only link your anyone like friends, babysitters, or doctor.</p>
                <small>It will allow them to see {{ ucfirst($baby->babyName) }}'s data, but not able to update any logs or settings. </small>
            </td>
        </tr>
    </tbody>
</table>

Fiddle https://jsfiddle.net/bheng/nLa3so8f/4/

Answer 1

您在这里所做的是，您使用更具体的 CSS 选择器覆盖了宽度。这里 .myTable th 比内联 CSS 样式 <th width="5%">#</th> 更具特异性。如果您只是从 .myTable th CSS 选择器中删除宽度，您的列将开始支持内联 CSS width

设置table宽度未生效

Set table width is not taking effect

html

css

html-table