Question

我在2013年和2018年有一个表格显示各个国家参与项目。在一个国家参与的一年中，我们希望显示一个黑色圆圈。这个小区将是空的一年，这个国家没有参加。

为了便于访问，我正在考虑＆＃34;是＆＃34;和＆＃34;不＆＃34;在表格中，然后使用CSS重新定位和:: before伪元素将屏幕阅读器可读文本放在屏幕上，并将黑色圆圈交换到“是”单元格中。

我可以说黑色圆圈没有居中。为了强调正在发生的事情，我更换了＃34;是＆＃34;与'＃34;肯定＆＃34;并取代了＃34; No＆＃34;用空心圆而不是空洞。由下面的代码生成的显示显示圆圈显示在单词＆＃34;肯定＆＃34;的位置的左侧。和＆＃34;不＆＃34;如果我没有取代他们就会这样。如何显示列中居的符号？

<!DOCTYPE html>
<html>
<style>
table {
    border-collapse: collapse;
    font-size: 24px;
    border: none;
    margin: 1em 0;
}

/* thead */
table thead th {
    font-weight: bold;
    padding: 0 1em;
}

table thead th.text {
    text-align: left;
}

table thead th.indicator {
    text-align: center;
}

table thead th:not(:first-child) {
    border-left: 1px solid white;
}

/* tbody */
table tbody th,
table tbody td {
    padding: 0.15em 1em;
    color: black;
    background-color: white;
}

table tbody th {
    text-align: left;
    font-weight: normal;
}

table tbody td {
    border-left: 1px solid white;
}

table tbody td.text {
    text-align: left;
}

table tbody td.indicator {
    text-align: center;
}

/* Specifics for IC tables */
table.ic thead th {
    color: white;
    background-color: #6BB1C9;
}

table.ic tbody tr:nth-child(odd) th,
table.ic tbody tr:nth-child(odd) td {
    background-color: #E1F0F4;
}


/* Indicator symbol substitution */
table tbody td .yes {
    position: relative;
    left: -999em;
    width: 0;
}

table tbody td .yes::before {
    position: relative;
    left: 999em;
    content: "\0025cf";
}

table tbody td .no {
    position: relative;
    left: -999em;
    width: 0;
}

table tbody td .no::before {
    position: relative;
    left: 999em;
    content: "\0025cb";
}
</style>

<h1>Table example</h1>
<table class="ic">
<thead>
    <tr>
        <th scope="col">Country</th><th scope="col" class="indicator">2013</th><th scope="col" class="indicator">2018</th>
    </tr>
</thead>
<tbody>
    <tr>    <th scope="row">Australia</th>  <td class="indicator"><span class="yes">Affirmative</span>  <td class="indicator"><span class="no">No</span>    </tr>
    <tr>    <th scope="row">Bolivia</th>    <td class="indicator"><span class="yes">Affirmative</span>  <td class="indicator"><span class="yes">Affirmative</span>  </tr>
    <tr>    <th scope="row">Croatia</th>    <td class="indicator"><span class="yes">Affirmative</span>  <td class="indicator"><span class="no">No</span>    </tr>
    <tr>    <th scope="row">Denmark</th>    <td class="indicator"><span class="yes">Affirmative</span>  <td class="indicator"><span class="yes">Affirmative</span>  </tr>
    <tr>    <th scope="row">Ethiopia</th>   <td class="indicator"><span class="no">No</span>    <td class="indicator"><span class="yes">Affirmative</span>  </tr>
    <tr>    <th scope="row">France</th> <td class="indicator"><span class="no">No</span>    <td class="indicator"><span class="yes">Affirmative</span>  </tr>
    <tr>    <th scope="row">Germany</th>    <td class="indicator"><span class="yes">Affirmative</span>  <td class="indicator"><span class="yes">Affirmative</span>  </tr>
</tbody>
</table>
</html>

这给了我：

如果没有替换，我会得到以下内容，这表明如果我没有取代它们，那么这些符号将位于文字所在位置的左边缘。

任何人都可以给我任何提示吗？我已经尝试将移位文本的宽度设置为0并隐藏溢出，但无济于事。

Answer 1

无需通过将其定位到-999em来隐藏跨度。请参阅以下解决方案。希望这会有所帮助。（JSFiddle link）

在这里，我只是将span文本设置为透明和定位：在calc（）之前。这将始终使其在中间对齐。

＆＃13;

table {
    border-collapse: collapse;
    font-size: 24px;
    border: none;
    margin: 1em 0;
}

/* thead */
table thead th {
    font-weight: bold;
    padding: 0 1em;
}

table thead th.text {
    text-align: left;
}

table thead th.indicator {
    text-align: center;
}

table thead th:not(:first-child) {
    border-left: 1px solid white;
}

/* tbody */
table tbody th,
table tbody td {
    padding: 0.15em 1em;
    color: black;
    background-color: white;
}

table tbody th {
    text-align: left;
    font-weight: normal;
}

table tbody td {
    border-left: 1px solid white;
}

table tbody td.text {
    text-align: left;
}

table tbody td.indicator {
    text-align: center;
}

/* Specifics for IC tables */
table.ic thead th {
    color: white;
    background-color: #6BB1C9;
}

table.ic tbody tr:nth-child(odd) th,
table.ic tbody tr:nth-child(odd) td {
    background-color: #E1F0F4;
}


/* Indicator symbol substitution */
table tbody td .yes {
    position: relative;    
    width: 100%;
    color: transparent;
    display: block;
}

table tbody td .yes::before {
    position: absolute;
    left: calc(50% - 10px);
    content: "\0025cf";
    display: block;    
    color: #000;
    width: 20px;    
}

table tbody td .no {
    position: relative;    
    width: 100%;
    color: transparent;
    display: block;
}

table tbody td .no::before {    
    position: absolute;
    left: calc(50% - 10px);
    content: "\0025cb";
    display: block;    
    color: #000;
    width: 20px;    
}

＆＃13;

<h1>Table example</h1>
<table class="ic">
<thead>
    <tr>
        <th scope="col">Country</th><th scope="col" class="indicator">2013</th><th scope="col" class="indicator">2018</th>
    </tr>
</thead>
<tbody>
    <tr>    <th scope="row">Australia</th>  <td class="indicator"><span class="yes">Affirmative</span>  <td class="indicator"><span class="no">No</span>    </tr>
    <tr>    <th scope="row">Bolivia</th>    <td class="indicator"><span class="yes">Affirmative</span>  <td class="indicator"><span class="yes">Affirmative</span>  </tr>
    <tr>    <th scope="row">Croatia</th>    <td class="indicator"><span class="yes">Affirmative</span>  <td class="indicator"><span class="no">No</span>    </tr>
    <tr>    <th scope="row">Denmark</th>    <td class="indicator"><span class="yes">Affirmative</span>  <td class="indicator"><span class="yes">Affirmative</span>  </tr>
    <tr>    <th scope="row">Ethiopia</th>   <td class="indicator"><span class="no">No</span>    <td class="indicator"><span class="yes">Affirmative</span>  </tr>
    <tr>    <th scope="row">France</th> <td class="indicator"><span class="no">No</span>    <td class="indicator"><span class="yes">Affirmative</span>  </tr>
    <tr>    <th scope="row">Germany</th>    <td class="indicator"><span class="yes">Affirmative</span>  <td class="indicator"><span class="yes">Affirmative</span>  </tr>
</tbody>
</table>

＆＃13;

Answer 2

这种方法的问题（如果你关心可访问性）是CSS伪元素实际上没有添加到DOM。大多数浏览器会对此进行补偿，但Internet Explorer doesn't。有足够的人使用IE，这很重要。将内容大小调整为零像素高度或宽度也会阻止屏幕阅读器宣布内容。

解决此问题的更好方法是将所有内容加载到DOM中，然后对您不希望屏幕阅读器宣布的内容使用... snip ... class FBLPost { private: string Post = ""; FBLPost* next = 0; int likes = 0; FBLUser* author; int id; static int currentId; ... snip ...属性。

这是一个更易于访问的版本的小提琴： https://jsfiddle.net/2jvL6f0L/

Answer 3

好吧，我提出了一个解决方案：在::之前设置display: block;。这有几个副作用：表格行现在比我更高，即使我已经将填充和边距设置为0;并且圈子没有垂直居中，设置vertical-align: middle;并没有解决这个问题。我已经开始设置top: 4px;，但我对这种方法并不满意。

Answer 4

在此处结合之前回复中的想法，我现在已经为我之前的方法提出了以下替代方案。

table tbody td.indicator {
    text-align: left; /* not center */
}

...

table tbody td .yes {
    position: relative;
    left: -999em;
}

table tbody td .yes::before {
    position: relative;
    left: calc(50% + 998.75em);
    content: "\0025cf";
}

Answer 5

以下是一个应该有用的解决方案。

我将Affirmative和No移动到title的{{1}}属性中，并将两种圈子的HTML元素作为{<span>的内容1}}

这消除了对CSS中<span>的需求。

标题有助于辅助功能，但不是真的，因为所有的屏幕阅读器都会读取“肯定”或“否”这个词而没有上下文。如果您担心屏幕阅读器改进:before属性更像是：title或类似的东西，那可能会更好。

title="Affirmative for Germany in 2013"

在表格单元格中替换文本的符号并保持中心对齐

5 个答案: