对齐到两个不同单元格中 table 单元格的中心

Question

在下面的 HTML 代码中。请在“Center align”

找到代码

CSS

.QuestionnaireGroupQuestionContainer table td {
        border: 1px solid red;
    }

    .tabularOptionsHeader input {
        visibility: hidden;
    }

    .tabularOptions label {
        visibility: hidden;
    }

    .tabularOptions {
        border-spacing: 0px;
        vertical-align: top;
    }

HTML

<body class="QuestionnaireGroupQuestionContainer">
<table class="tabularOptionsHeader">
    <tbody>
        <tr>
            <td>
                <span class="QuestionOptions">
                    <input type="radio" />
                    <label>1. (Slet ikke relevant)</label>
                </span>
            </td>
        </tr>
    </tbody>
</table>
<table class="tabularOptions">
    <tbody>
        <tr>
            <td>
                <span class="QuestionOptions">
                    <input type="radio" />
                    <label>
                        1. (Slet ikke relevant)
                    </label>
                </span>
            </td>
        </tr>
    </tbody>
</table>

我有两个 table，主要是 class tabularOptionsHeader 和 tabularOptions

第一个 table class 包含一个包含单选按钮及其标签的跨度的行
第二个 table class 包含另一行，单选按钮和标签都相同。

我需要将第一个 table 显示为 header，将第二个 table 显示为 body，这将有多个选项，基本上是单选按钮的表格格式最上面一行是 header.

的列表

我可以通过使用 CSS 并将第一个 table 输入类型收音机设置为 visibility:hidden[ 来实现这一点=58=] 和第二个 table 我将标签可见性设置为隐藏。

下面是输出。

我需要将这些 header 文本和单选按钮对齐到它们各自单元格的中心，但我无法这样做主要是因为 的设置visibility css 我设置的属性。

我不能使用 display:none 因为我需要为包含文本以及包含两个不同 tables 中的单选按钮的列。

是否可以使用 CSS 实现两个不同 table 中的文本和单选按钮的居中对齐？

无法将第二个 table 中的行添加到第一个 table 中，因为输出是两个单独的 table。

Answer 1

如果你想实现这一点，我建议你需要改变你的 DOM:

table th, table td {
    text-align:center;
}

<table>
    <tbody>
        <tr>
            <th>1. (Slet ikke relevant)</th>                
        </tr>
        <tr>
            <td><input type="radio" /></td>                
        </tr>
    </tbody>
</table>

如果这在您的后端无法实现，那么我建议 JavaScript。

Answer 2

这样试试：

table.t td {
  text-align: center;
}
table.t td input {
  position: relative;
  display:none;
}
table.tt td {
  text-align: center;
}
table.tt td input {
  position: relative;
}
table.tt td label {
  display:none;
}

<table class="t" border="1">
  <tbody>
    <tr>
      <td width="200">
        <input type="radio" />
        <label>1. (Slet ikke relevant)</label>
      </td>
    </tr>
    <tr>
      <td>
        <input type="radio" />
        <label>1. (Slet ikke relevant)</label>
      </td>
    </tr>
  </tbody>
</table> 
<table  class="tt" border="1">
  <tbody>
    <tr>
      <td  width="200">
        <input type="radio" />
        <label>1. (Slet ikke relevant)</label>
      </td>
    </tr>
    <tr>
      <td>
        <input type="radio" />
        <label>1. (Slet ikke relevant)</label>
      </td>
    </tr>
  </tbody>
</table>

对齐到两个不同单元格中 table 单元格的中心

Align to the Center of a table cell in two different cells

html

css

css-position