Изменить таблицы начальной загрузки столбцов

У меня есть статический PHP-сайт, на котором я использую Bootstrap. Таблицы контролируются Bootstrap.

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

Я пробовал встроенные ширины на <th>, но ничего не происходит:

  <table class="table table-condensed table-striped  table-hover">
  <thead>
    <tr>
        <th>#</th>
        <th width="12%">Last Name</th>
        <th width="12%">First Name</th>
        <th width="12%">Spouse Name</th>
        <th width="20%">Address</th>
        <th width="5%">City</th>
        <th  width="12%"class="did_phone">Phone</th>
        <th width="15%">E-Mail</th>
         <th width="15%"></th>
    </tr>
  </thead>
  <tbody>

Экран, показанный ниже, чтобы вы могли видеть: https://docs.google.com/file/d/0B9AH3_9hXYkhQzJBclp3bU9iUU0/edit?usp=drivesdk

Итак... как изменить ширину <td>, внести корректировки, чтобы в Bootstrap не было обертывания?

Ответ 1

Bootstrap делает таблицы 100%. Итак, для таблиц th установлено значение 100%. Решение состоит в том, чтобы сделать его auto. Поэтому я просто перегрузил Bootstrap, добавив следующее в свой css:

table th {
    width: auto !important;
}

И все прекрасно выстроилось.

Ответ 2

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

DEMO

В демо, я только что создал стиль CSS для th, как показано ниже:

th{
    padding: 0px 0px 0px 50px;
}

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

Последний вариант, который я вам представляю, следующий:

DEMO

В этом примере используется строго ширина. Фактически, самый простой способ сделать это - установить общую ширину для таблицы, а затем при необходимости настроить метку для т-тегов. У вас уже есть ваши проценты (это отличная идея), но вы на самом деле ничего не получаете.. прямо сейчас ваши тэги думают, что существует ширина 0, потому что вы еще не указали, насколько велики вы хотите, чтобы те тэги стали. Давайте взглянем на код:

table{
    border: 1px solid black;
    width: 1000px;
}
th{
    width: 900px;
}

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

Одно замечание: я добавил в рамку для таблицы, что сделало ее более читаемой для меня, чтобы я мог выполнить демо. Примите его, если вам нужно!

Удачи:)

Ответ 3

Вы можете попробовать использовать этот стиль = "width: 12%" в каждом th.

Пример:

<table class="table table-bordered">
 <thead>
 <tr>
    <th>#</th>
    <th style="width:12%">Last Name</th>
    <th style="width:12%">First Name</th>
    <th style="width:12%">Spouse Name</th>
    <th style="width:20%">Address</th>
    <th style="width:5%">City</th>
    <th  style="width:12%"class="did_phone">Phone</th>
    <th style="width:15%">E-Mail</th>
 </tr>
 </thead>
 <tbody>
    <tr>
        <td>1</td>
        <td>Last Name</td>
        <td>First Name</td>
        <td>Spouse Name</td>
        <td>Adress</td>
        <td>City</td>
        <td>Phone</td>
        <td>E-Mail</td>
    </tr>
 </tbody>
</table>