HTML Table 带框条目

Question

我有一个 HTML table 格式如下，我想改进 table 的设计。我想将 'Codes' 列中的字母格式化为一种盒子形状，也就是说，我想在每个字母（A B 或 C）周围画一个盒子，并为盒子的背景涂上不同的颜色。你会怎么做？

    <table class="table table-striped">
        <thead>
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Codes</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>John</td>
                <td>Doe</td>
                <td>A B C</td>
            </tr>
            <tr>
                <td>Mary</td>
                <td>Moe</td>
                <td>B C</td>
            </tr>
            <tr>
                <td>July</td>
                <td>Dooley</td>
                <td>A C</td>
            </tr>
        </tbody>
    </table>

Answer 1

如果你不能使用 JS，那么使用普通 CSS 的唯一解决方案是 tr td:last-child::first-letter {} 选择器。它允许您为每行最后一列中的第一个字母设置样式。

如果你可以使用 JS，你可以使用这个 JavaScript 片段

$("tr td:last-child").contents().each(function(){
if (this.nodeType == 3) {
    var $this = $(this);
    $this.replaceWith($this.text().replace(/(\w)/g, "<span class="letterbox">$&</span>"));
  } 
});

还有这个CSS

.letterbox { display: inline-block; padding: 5px; background-color: #ddd;}

HTML Table 带框条目

HTML Table with boxed entries

html

css

html-table