Выровняйте кнопки по нижней части ячейки таблицы

0

У меня есть страница, состоящая из таблицы с двумя столбцами, отображающей информацию о событии с помощью кнопки "Изменить" и "Удалить". Информация о событии имеет разную высоту, но я хочу, чтобы кнопки были внизу, независимо от высоты ячейки.

<html>
<body>
    <form id="form1" name="form1">
        <!--input type="hidden" name="formType" id="formType" value="" />
        <input type="hidden" name="inpMonth" id="inpMonth" value="10" />
        <input type="hidden" name="inpDay" id="inpDay" value="" /-->
    </form>
    <div>
        <h1 style="background-color:darkblue; color: white; width:100%;text-align:center;">NOV 27, 2013</h1>
    </div>
    <div style="text-align: center;">
        <table style="width: 95%; border: thin black solid; border-collapse: collapse;">
            <tr>
                <td style="width:50%; border-right: thin black solid; border-bottom: thin black solid; 
                    border-collapse: collapse;">
                    <br>
                    <div style="margin-top: 10px; vertical-align: top;height: 100%;">
                        <label style="width: 100%;padding-left: 25px;">Name: Job Fair</label>
                        <label style="width: 100%;padding-left: 25px;">Start Time: 10:00AM</label>
                        <label style="width: 100%;padding-left: 25px;">End Time: 2:00PM</label>
                        <label style="width: 100%;padding-left: 25px;">
                            Description: Job Fair for Veterans.  Description: Job Fair for Veterans.  Description: Job Fair for Veterans.  Description: Job Fair for Veterans.
                        </label>
                        <label style="width: 100%;padding-left: 25px;">Location: Henry B. Gonzales Convention Center</label>
                    </div>
                    <div style="padding-left:25%;" >
                            <button style="vertical-align: bottom;">Edit</button>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <button>Delete</button>
                    </div>
                    <br>
                </td>
                <td style="width:50%; border-right: thin black solid; border-bottom: thin black solid; 
                    border-collapse: collapse;">
                    <br>
                    <div style="margin-top: 10px; vertical-align: top;height: 100%;">
                        <label style="width: 100%;padding-left: 25px;">Name: Job Fair</label>
                        <label style="width: 100%;padding-left: 25px;">Start Time: 10:00AM</label>
                        <label style="width: 100%;padding-left: 25px;">End Time: 2:00PM</label>
                        <label style="width: 100%;padding-left: 25px;">
                            Description: Job Fair for Veterans.  Description: Job Fair for Veterans.  Description: Job Fair for Veterans.  Description: Job Fair for Veterans.Description: Job Fair for Veterans.  Description: Job Fair for Veterans.Description: Job Fair for Veterans.  Description: Job Fair for Veterans.Description: Job Fair for Veterans.  Description: Job Fair for Veterans.
                        </label>
                        <label style="width: 100%;padding-left: 25px;">Location: Henry B. Gonzales Convention Center</label>
                    </div>
                    <div style="padding-left:25%;" >
                            <button style="vertical-align: bottom;">Edit</button>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <button>Delete</button>
                    </div>
                    <br>
                </td>
            </tr>
            <tr>
                <td style="width:50%; border-right: thin black solid; border-bottom: thin black solid; 
                    border-collapse: collapse;">
                    <br>
                    <div style="margin-top: 10px; vertical-align: top;height: 100%;">
                        <label style="width: 100%;padding-left: 25px;">Name: Job Fair</label>
                        <label style="width: 100%;padding-left: 25px;">Start Time: 10:00AM</label>
                        <label style="width: 100%;padding-left: 25px;">End Time: 2:00PM</label>
                        <label style="width: 100%;padding-left: 25px;">
                            Description: Job Fair for Veterans.  Description: Job Fair for Veterans.  Description: Job Fair for Veterans.  Description: Job Fair for Veterans.  Description: Job Fair for Veterans.  Description: Job Fair for Veterans.  Description: Job Fair for Veterans.  Description: Job Fair for Veterans.  Description: Job Fair for Veterans.  Description: Job Fair for Veterans.
                        </label>
                        <label style="width: 100%;padding-left: 25px;">Location: Henry B. Gonzales Convention Center</label>
                    </div>
                    <div style="padding-left:25%;" >
                            <button style="vertical-align: bottom;">Edit</button>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <button>Delete</button>
                    </div>
                    <br>
                </td>
                <td style="width:50%; border-right: thin black solid; border-bottom: thin black solid; 
                    border-collapse: collapse;">
                    <br>
                    <div style="margin-top: 10px; vertical-align: top;height: 100%;">
                        <label style="width: 100%;padding-left: 25px;">Name: Job Fair</label>
                        <label style="width: 100%;padding-left: 25px;">Start Time: 10:00AM</label>
                        <label style="width: 100%;padding-left: 25px;">End Time: 2:00PM</label>
                        <label style="width: 100%;padding-left: 25px;">
                            Description: Job Fair for Veterans.  Description: Job Fair for Veterans.  Description: Job Fair for Veterans.  Description: Job Fair for Veterans.
                        </label>
                        <label style="width: 100%;padding-left: 25px;">Location: Henry B. Gonzales Convention Center</label>
                    </div>
                    <div style="padding-left:25%;" >
                            <button style="vertical-align: bottom;">Edit</button>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <button>Delete</button>
                    </div>
                    <br>
                </td>

            </tr>
            <td colspan="2" style="border: thin black solid;text-align:center; background-color: lightgreen;">
                <br>
                <form>
                    <label style="width:100px; text-align: right;">Event Name:</label>&nbsp;&nbsp;<input type="text" style="width:250px;" value="" /><br>
                    <label style="width:100px; text-align: right;">Start Time:</label>&nbsp;&nbsp;<input type="text" style="width:250px;" value="" /><br>
                    <label style="width:100px; text-align: right;">End Time:</label>&nbsp;&nbsp;<input type="text" style="width:250px;" value="" /><br>
                    <label for="taDescription" style="width:100px; text-align: right;">Description:</label>&nbsp;&nbsp;<textarea id="taDescription" rows="3" style="width:250px; vertical-align:middle;"></textarea> <br>
                    <label style="width:100px; text-align: right;">Location:</label>&nbsp;&nbsp;<input type="text" style="width:250px;" value="" /><br>
                    <br>
                    <input type="submit" style="margin-left: 25%; margin-right:25%;" value="Add"/>
                </form>
            </td>                
        </table>
    </div>

</body>
</html>
Теги:

2 ответа

1
Лучший ответ

Поместите div, содержащий кнопки абсолютно и в нижней части ячейки таблицы, которые должны располагаться относительно.

td {
    position:relative;
}
.buttons {
    position:absolute;
    bottom:0;
}

Пример jsFiddle

  • 0
    Та же самая информация, которую я нашел, выберет ваш ответ, когда позволит.
0

Найден ответ в нижней части вертикального выравнивания для ссылки внутри ячейки таблицы. Установив td в "position: relative" и div, содержащий кнопки "position: absolute; bottom: 0", он переместил кнопки, где я их хотел.

Рабочий html:

                    <td style="width:50%; border-right: thin black solid; border-bottom: thin black solid; 
                    border-collapse: collapse; position: relative;">
                    <br>
                    <div style="margin-top: 10px; vertical-align: top;height: 80%;">
                        <label style="width: 100%;padding-left: 25px;">Name: Job Fair</label>
                        <label style="width: 100%;padding-left: 25px;">Start Time: 10:00AM</label>
                        <label style="width: 100%;padding-left: 25px;">End Time: 2:00PM</label>
                        <label style="width: 100%;padding-left: 25px;">
                            Description: Job Fair for Veterans.  Description: Job Fair for Veterans.  Description: Job Fair for Veterans.  Description: Job Fair for Veterans.
                        </label>
                        <label style="width: 100%;padding-left: 25px;">Location: Henry B. Gonzales Convention Center</label>
                    </div>
                    <div style="position: absolute; bottom:15;text-align: center; width: 100%;">

                            <button style="vertical-align: bottom;">Edit</button>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <button style="vertical-align: bottom;">Delete</button>

                    </div>
                </td>

Ещё вопросы

Сообщество Overcoder
Наверх
Меню