Question

在下面的HTML代码中。请在＆＃34; Center align＆＃34;

中找到代码

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>

我有两个表主要是 tabularOptionsHeader 和 tabularOptions

第一个表类包含一个包含单选按钮及其标签的行
第二个表类包含另一个带有单选按钮的行，且标签都相同。

我需要将第一个表显示为标题，将第二个表显示为主体，它将具有多个选项，基本上是单选按钮列表的表格格式，最顶行是标题。

我可以通过使用CSS并将第一个表格输入类型的收音机设置为 visibility：hidden 来实现此功能，而第二个表格则将标签可见性设置为隐藏。

以下是输出。

enter image description here

我需要将这些标题文本和单选按钮对齐到各自单元格的中心但我无法这样做主要是因为设置了 可见性 css我设置的属性。

我无法使用 display：none ，因为我需要具有包含文本的列的精确宽度以及包含两个单选按钮的列不同的表格。

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

将第二个表中的行添加到第一个表中是不可能的，因为输出是两个单独的表。

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

试试这样：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

与两个不同单元格中的表格单元格的中心对齐

2 个答案: