Блог

Главная - Вопросы по программированию - CSS решение для размещения элемента Span в элементе таблицы

CSS решение для размещения элемента Span в элементе таблицы

#html #css #position

#HTML #css #позиционирование

Вопрос:

Я пытаюсь расположить элемент span относительно верхнего правого угла объекта table.

Эта таблица может быть шире или перемещаться в зависимости от того, что пользователь делает с инструментом, поэтому я искал что-то более простое, чем метод jQuery.position. Я надеялся сделать что-нибудь элегантное с помощью CSS.

Я создал небольшой пример моей дилеммы в jsfiddle: http://jsfiddle.net/xerf/ZSGfc /

 <div>
    <table>
        <thead>
            <tr>
                <th colspan="3">Title</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Stuff 1</td>
                <td>Stuff 2</td>
                <td>Stuff 3</td>
            </tr>
            <tr>
                <td>Stuff 1</td>
                <td>Stuff 2</td>
                <td>Stuff 3</td>
            </tr>
            <tr>
                <td>Stuff 1</td>
                <td>Stuff 2</td>
                <td>Stuff 3</td>
            </tr>
        </tbody>
    </table>
    <span>amp;times;</span>
</div>

Ниже приведены стили CSS

 body
{
    font-family:sans-serif;
}

table
{
    border-collapse: collapse;
    border: 1px solid black;
    margin: 20px;
}

th
{
    padding: 6px;
}

td
{
    padding: 3px;
    border: 1px solid black;
}

ОБНОВЛЕНИЕ: Добавлено несколько изображений для отображения требуемых позиций:

Сценарий 1

Должно быть там, где вверху отображается красный квадрат

Комментарии:

1. когда вы говорите «положение относительно верхнего правого», что именно это означает? Вы хотите поместить его в правом верхнем углу? или просто использовать это как точку отсчета для его позиционирования? (в каком случае position: relative должно сработать, хотя для этого может использоваться нижний левый, не помню)

2. Томас, пойми мою двусмысленность. Надеюсь, мои обновления помогут объяснить

Ответ №1:

Я заключил ваш span в div и поместил его в <th> с вашим заголовком:

  <th colspan="3"><div id="container">Title
                    <span>amp;times;</span></div></th>

css:

 #container{
    width:auto;
    height:auto;
    position:relative;
}
span{
    position:absolute;
    right:0px;
    top:0px;

Вот демонстрационный пример:http://jsfiddle.net/ZSGfc/6 /

Ответ №2:

Очень простым способом было бы просто добавить еще одну строку в самый верх таблицы, удалив ее левую, верхнюю и правую границы. Затем переместите свой span так, чтобы он содержался в этой новой строке, и выровняйте текст по правому краю.

Ответ №3:

Я бы рекомендовал использовать div или добавить другой div , который будет управлять шириной таблицы, а затем заставить таблицу наследовать ширину этого div. Оттуда установите для свойства div ‘s position значение relative. Тогда вы можете абсолютно точно расположить span на div .

Что-то похожее на эту скрипку. С некоторой доработкой.

Ответ №4:

Попробуйте это:

 div{ 
    position:relative;
    width: XXXpx;
}
table{
    width: XXXpx;
}
span{
   position: absolute;
   top: 0px;
   right: 0px;
}

Ответ №5:

дополнительная ячейка таблицы сверху с colspan="3" и text-align:right будет работать.