Как выровнять список переключателей внутри таблицы с остальной частью таблицы - PullRequest
Новая
       32

Как выровнять список переключателей внутри таблицы с остальной частью таблицы

1 голос
/ 03 июля 2019

Я пытаюсь выровнять список переключателей с остальной частью таблицы, даже когда вы уменьшаете размер окна браузера.

<div>
    <asp:Table ID="Table1" runat="server" style="width:100%" align="center">
        <asp:TableRow runat="server" align="center">
            <asp:TableCell runat="server" align="center">1</asp:TableCell>
            <asp:TableCell runat="server" align="center">2</asp:TableCell>
            <asp:TableCell runat="server" align="center">3</asp:TableCell>
            <asp:TableCell runat="server" align="center">Result</asp:TableCell>
        </asp:TableRow>
        <asp:TableRow runat="server" align="center">
            <asp:TableCell runat="server" align="center">
                <asp:RadioButton ID="RadioButton1" runat="server" /></asp:TableCell>
            <asp:TableCell runat="server" align="center">
                <asp:RadioButton ID="RadioButton2" runat="server" /></asp:TableCell>
            <asp:TableCell runat="server" align="center">
                <asp:RadioButton ID="RadioButton3" runat="server" /></asp:TableCell>
            <asp:TableCell runat="server" align="center"></asp:TableCell>
        </asp:TableRow>
        <asp:TableRow runat="server" align="center">
            <asp:TableCell runat="server" align="center" RepeatColumns="3">
                <asp:RadioButtonList ID="RadioButtonList1" runat="server" RepeatDirection="Horizontal">
                    <asp:ListItem Value="1"></asp:ListItem>
                    <asp:ListItem Value="2"></asp:ListItem>
                    <asp:ListItem Value="3"></asp:ListItem>
                </asp:RadioButtonList>
            </asp:TableCell>
            <asp:TableCell runat="server" align="center"></asp:TableCell>
        </asp:TableRow>
    </asp:Table>
</div>

Во 2-й строке таблицы я использовал 3 переключателя вместо списка переключателей и выравнивается по 1-й строке, даже когда размер окна браузера изменяется, но в 3-й строке я использовалсписок переключателей, и он просто не совпадает с остальной таблицей.

Вот экран печати для лучшего понимания: https://i.imgur.com/VjtU1cE.png

1 Ответ

1 голос
/ 03 июля 2019

У вас есть четыре столбца в первых двух строках и только два столбца в третьем ряду. Таким образом, либо добавьте еще два столбца (TableCells) в третью строку, либо добавьте свойство ColumnSpan со значением 3 в ячейку, в которой для компенсации есть RadioButtonList. Остальное - просто выравнивание и использование некоторого CSS.

Если вы добавляете пустые ячейки, добавьте пространство HTML для свойства text, чтобы они правильно отображались. Я предполагаю, что вы используете CSS для ячеек / границ таблицы.

Итак, если вы просто добавите ColumnSpan к тому, что у вас есть: 

<asp:TableRow runat="server" align="center">
    <asp:TableCell runat="server" align="center" ColumnSpan="3"
        RepeatColumns="3">
        <asp:RadioButtonList ID="RadioButtonList1" runat="server"
            RepeatDirection="Horizontal">
            <asp:ListItem Value="1"></asp:ListItem>
            <asp:ListItem Value="2"></asp:ListItem>
            <asp:ListItem Value="3"></asp:ListItem>
        </asp:RadioButtonList>
    </asp:TableCell>
    <asp:TableCell runat="server" align="center"></asp:TableCell>
</asp:TableRow>

Кроме того, вы можете добавить еще две пустые ячейки к тому, что у вас есть: 

<asp:TableRow runat="server" align="center">
    <asp:TableCell runat="server" align="left" CssClass="radioButtonCell"
        RepeatColumns="3">
        <asp:RadioButtonList ID="RadioButtonList1" runat="server"
            RepeatDirection="Horizontal">
            <asp:ListItem Value="1"></asp:ListItem>
            <asp:ListItem Value="2"></asp:ListItem>
            <asp:ListItem Value="3"></asp:ListItem>
        </asp:RadioButtonList>
    </asp:TableCell>
    <asp:TableCell runat="server" align="center">&nbsp;</asp:TableCell>
    <asp:TableCell runat="server" align="center">&nbsp;</asp:TableCell>
    <asp:TableCell runat="server" align="center">&nbsp;</asp:TableCell>
</asp:TableRow>

CSS:

Обратите внимание, это работает во фрагменте, который я создал. Возможно, вам придется настроить это. В моем примере радио-кнопка была слишком далеко оставлена. 

.radioButtonCell
{
    padding-left:15px;
}
...