Css 用符号替换表格单元格中的文本并保持中心对齐_Css_Html Table_Accessibility_Substitution

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

css

Css 用符号替换表格单元格中的文本并保持中心对齐,css,html-table,accessibility,substitution,Css,Html Table,Accessibility,Substitution,我有一张表格显示了2013年和2018年各国参与项目的情况。在一个国家参与的一年中，我们希望展示一个黑色圆圈。该牢房将在该国未参与的一年内空置为了便于访问，我正在考虑在表中设置“是”和“否”，然后使用CSS重新定位和：：before伪元素将屏幕阅读器可读的文本移出屏幕，并在Yes单元格中将黑色圆圈替换到位我可以看出黑圈没有居中。为了强调发生了什么，我将“是”替换为“肯定”，并将“否”替换为一个空心圆圈，而不是一无所有。下面代码生成的显示显示，圆圈显示在左侧，如果我没有替换它们的话，“肯定”和

我有一张表格显示了2013年和2018年各国参与项目的情况。在一个国家参与的一年中，我们希望展示一个黑色圆圈。该牢房将在该国未参与的一年内空置

为了便于访问，我正在考虑在表中设置“是”和“否”，然后使用CSS重新定位和：：before伪元素将屏幕阅读器可读的文本移出屏幕，并在Yes单元格中将黑色圆圈替换到位

我可以看出黑圈没有居中。为了强调发生了什么，我将“是”替换为“肯定”，并将“否”替换为一个空心圆圈，而不是一无所有。下面代码生成的显示显示，圆圈显示在左侧，如果我没有替换它们的话，“肯定”和“否”将显示在左侧。如何显示列中居中的符号

<!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>


桌子{
边界塌陷：塌陷；
字体大小：24px；
边界：无；
利润率：1米0；
}
/*泰德*/
表thead th{
字体大小：粗体；
填充：0.1em；
}
表THAD th.text{
文本对齐：左对齐；
}
表THAD th.指示器{
文本对齐：居中；
}
表THAD th：非（第一个孩子）{
左边框：1px纯白；
}
/*t车身*/
表tbody th，
表tbody td{
填充物：0.15em 1em；
颜色：黑色；
背景色：白色；
}
表tbody th{
文本对齐：左对齐；
字体大小：正常；
}
表tbody td{
左边框：1px纯白；
}
表tbody td.text{
文本对齐：左对齐；
}
表T车身td指示器{
文本对齐：居中；
}
/*IC表的详细信息*/
表1.ic thead th{
颜色：白色；
背景色：#6BB1C9；
}
表1.ic tbody tr:n个孩子（奇数）th，
表1.ic tbody tr:n个孩子（奇数）td{
背景色：#E1F0F4；
}
/*指示符替换*/
桌上有{
位置：相对位置；
左：-999em；
宽度：0；
}
表tbody td.yes:：before{
位置：相对位置；
左：999em；
内容：“\0025cf”；
}
表tbody td.no{
位置：相对位置；
左：-999em；
宽度：0；
}
表tbody td.no:：before{
位置：相对位置；
左：999em；
内容：“\0025cb”；
}
表格示例
国家20132018
澳大利亚肯定否
玻利维亚肯定肯定
克罗地亚肯定不
丹麦肯定肯定
埃塞俄比亚不赞成
法国不赞成
德国肯定

这给了我：

在没有替换的情况下，我得到了以下结果，这表明符号位于单词的左边缘，如果我没有替换它们的话

有人能给我一些提示吗？我曾尝试将替换文本的宽度设置为0并隐藏溢出，但没有成功。

我想出了一个解决方案：设置

display:block在：：before上。这有两个副作用：表行现在比我想要的要高，尽管我已经将padding和margin设置为0；并且圆没有垂直居中，设置vertical align:middle不能解决这个问题。我已经结束了设置top:4px但我对这种方法不感兴趣。无需通过将span定位到-999em来隐藏span。
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";
}

请参阅以下解决方案。希望这会有所帮助。（）
在这里，我刚刚通过calc（）使span文本透明并定位：before。这将总是使它在中间对齐。

表格{
边界塌陷：塌陷；
字体大小：24px；
边界：无；
利润率：1米0；
}
/*泰德*/
表thead th{
字体大小：粗体；
填充：0.1em；
}
表THAD th.text{
文本对齐：左对齐；
}
表THAD th.指示器{
文本对齐：居中；
}
表THAD th：非（第一个孩子）{
左边框：1px纯白；
}
/*t车身*/
表tbody th，
表tbody td{
填充物：0.15em 1em；
颜色：黑色；
背景色：白色；
}
表tbody th{
文本对齐：左对齐；
字体大小：正常；
}
表tbody td{
左边框：1px纯白；
}
表tbody td.text{
文本对齐：左对齐；
}
表T车身td指示器{
文本对齐：居中；
}
/*IC表的详细信息*/
表1.ic thead th{
颜色：白色；
背景色：#6BB1C9；
}
表1.ic tbody tr:n个孩子（奇数）th，
表1.ic tbody tr:n个孩子（奇数）td{
背景色：#E1F0F4；
}
/*指示符替换*/
桌上有{
位置：相对位置；
宽度：100%；
颜色：透明；
显示：块；
}
表tbody td.yes:：before{
位置：绝对位置；
左：计算（50%-10px）；
内容：“\0025cf”；
显示：块；
颜色：#000；
宽度：20px；
}
表tbody td.no{
位置：相对位置；
宽度：100%；
颜色：透明；
显示：块；
}
表tbody td.no:：在{
位置：绝对位置；
左：计算（50%-10px）；
内容：“\0025cb”；
显示：块；
颜色：#000；
宽度：20px；
}
表格示例
国家20132018
澳大利亚肯定否
玻利维亚肯定肯定
克罗地亚肯定不
丹麦肯定肯定
埃塞俄比亚不赞成
法国不赞成
德国肯定
这种方法的问题（如果您关心可访问性）是CSS伪元素实际上没有添加到DOM中。大多数浏览器都会对此进行补偿，但是。有足够多的人使用IE，这很重要。将内容大小调整为零像素高度或宽度也会阻止屏幕阅读器公布内容
解决此问题的更好方法是将所有内容加载到DOM中，然后对不需要的内容使用aria hidden属性
<!DOCTYPE html>
<html>
<head>
  <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;
  }
  </style>
</html>
<body>
<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>
    </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Australia</th>
        <td class="indicator"><span title="Affirmative">&#x25CF;</span></td>
        <td class="indicator"><span title="No">&#x25CB;</span></td>
        </tr>
      <tr>
        <th scope="row">Bolivia</th>
        <td class="indicator"><span title="Affirmative">&#x25CF;</span></td>
        <td class="indicator"><span title="Affirmative">&#x25CF;</span></td>
        </tr>
      <tr>
        <th scope="row">Croatia</th>
        <td class="indicator"><span title="Affirmative">&#x25CF;</span></td>
        <td class="indicator"><span title="No">&#x25CB;</span></td>
        </tr>
      <tr>
        <th scope="row">Denmark</th>
        <td class="indicator"><span title="Affirmative">&#x25CF;</span></td>
        <td class="indicator"><span title="Affirmative">&#x25CF;</span></td>
        </tr>
      <tr>
        <th scope="row">Ethiopia</th>
        <td class="indicator"><span title="No">&#x25CB;</span></td>
        <td class="indicator"><span title="Affirmative">&#x25CF;</span></td>
        </tr>
      <tr>
        <th scope="row">France</th>
        <td class="indicator"><span title="No">&#x25CB;</span></td>
        <td class="indicator"><span title="Affirmative">&#x25CF;</span></td>
        </tr>
      <tr>
        <th scope="row">Germany</th>
        <td class="indicator"><span title="Affirmative">&#x25CF;</span></td>
        <td class="indicator"><span title="Affirmative">&#x25CF;</span></td>
        </tr>
    </tbody>
  </table>
</body>
</html>