зафиксируйте ширину таблицы

0

Изображение 174551

Я хочу создать такую же таблицу

Я реализовал вот так. Пожалуйста, проверьте мой JSFiddle.

HTML:

<table border="0" id="cssTable">
    <tr>
        <td>eredgb</td>
        <td><a href="self">04-Milwaukee</a></td>
        <td>705</td>
        <td>sdfdfdfed</td>
        <td>298</td>
    </tr>
    <tr>
        <td>sdfsdfsdfsdfsdf</td>
        <td><a href="self">04-Milwaukee</a></td>
        <td>705</td>
        <td>content2</td>
        <td>298</td>
    </tr>
    <tr>
        <td>sdfsdfsdfsdfsdf</td>
        <td><a href="self">04-Milwaukee edh walkohnykuohbnbd</a></td>
        <td>705</td>
        <td>content1</td>
        <td>298</td>
    </tr>
</table>

CSS:

#cssTable{
    margin-left:20px;
}

Как я могу сделать это как снимок экрана выше? Мне нужно обеспечить равное расстояние и некоторую фиксированную ширину для каждого содержимого таблицы td.

Теги:

7 ответов

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

Взгляните на это.

Вы можете использовать селектор css :nth-child() для таргетинга на определенный столбец.

#cssTable td {
    padding: 5px 15px;
}

#cssTable td:nth-child(2) {
    width: 100px;
}
Поделиться
  • 0
    Я просто использую это, когда я увеличиваю ширину до 500 пикселей, текст не подходит. он остается там только какая польза от ширины? jsfiddle.net/Pv3Zk/487
  • 0
    Это зависит от общей ширины таблицы, если вы хотите, чтобы она была точно 500px, установите также минимальную ширину - jsfiddle.net/Pv3Zk/488
2

Если вы хотите разместить каждый тд по-разному, вы можете использовать селектор nth-child:

#cssTable{margin-left:20px;}  
#cssTable tr td:nth-child(1){width: 100px; padding-right: 10px;}
#cssTable tr td:nth-child(2){width: 300px; padding-right: 10px;}
#cssTable tr td:nth-child(3){width: 50px; padding-right: 10px;}
#cssTable tr td:nth-child(4){width: 100px; padding-right: 10px;}
#cssTable tr td:nth-child(5){width: 50px;}

http://jsfiddle.net/mLpH9/2/

Если ваша таблица становится больше, вы можете, конечно, установить padding-right для всех столбцов и установить для last-child значение 0.

Поделиться
0

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

table { table-layout: fixed; }

и сделайте первый ряд таблицы с

td { height: 0; }

и укажите ширину для каждого td в этой строке.

По стандарту вы также можете использовать <col>, но в некоторых браузерах это не работает, td работает повсеместно.

Такие вопросы задают много раз в разных местах, например здесь

Поделиться
0

Вы можете использовать <colgroup> и <col>. Таким образом, вам не нужно выделять каждый <td> отдельный класс.

<table border="0" id="cssTable">
    <colgroup>
        <col width="100px" />
        <col width="100px" />
        <col width="50px" />
        <col width="75px" />
        <col width="50px" />
    </colgroup>
    <tr>
        ...

Также проверьте обновленный Fiddle.

Поделиться
0

Просто добавьте свой css

#cssTable td
{
 padding:0 20px;
}

Он добавит отступы влево и вправо. http://jsfiddle.net/Pv3Zk/484/

Поделиться
0

Как это? (обновленный, вдохновленный кодом @Grey)

#cssTable td {
    padding: 0px 10px;
}

#cssTable a {
    color:red;
}

#cssTable td:nth-child(1) {
    width:20px;
}
#cssTable td:nth-child(2) {
    width:200px;
}
#cssTable td:nth-child(3),#cssTable td:nth-child(5) {
    width:30px;
    font-weight:bold;
}
#cssTable td:nth-child(4) {
    width:20px;
}

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

Поделиться
  • 0
    это не будет слишком похоже на дизайн выше. мне нужен дизайн, как я вставил макет в моем вопросе
  • 0
    Как это тогда? Вдохновленный кодом @Grey.
0

попробуй это

установите css в таблицу td tag.

table td {
    width: 60px;
    overflow: hidden;
    display: inline-block;
    white-space: nowrap;
}

или создать класс и установить имя.

<td class="special_column">...</td>
Поделиться
  • 0
    Я хочу, чтобы текст был обернут на большую длину, чтобы не быть скрытым состоянием.

Ещё вопросы

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