Ширина столбцов таблицы заголовков в таблице Bootstrap

Question

Я использую Bootstrap и есть таблица со следующей структурой и стилем:

<table class="table table-bordered"> 
     <tr> 
      <th>Keyword</th> 
      <th>AdWords top</th> 
      <th>AdWords right</th> 
      <th>AdWords total</th> 
      <th>URLs of top AdWords</th> 
      <th>URLs of right AdWords</th> 
      <th>Non-Adwords results</th> 
      <th>Non-Adwords urls</th> 
      <th>Total links on page</th> 
      <th>Total SERP results</th> 
      <th>Cached SERP</th> 
     </tr> 
     .... 

Однако, когда я печатаю мои данные, это выглядит очень некрасиво:

Именно поэтому у меня есть несколько вопросов:

1. Как сделать нормальную ширину столбца с текстом внутри <th> элементов для того, чтобы соответствовать текст внутри ячейки

2. Как сделать аль текст внутри <th> выравниваются по центру

Answer 1

кажется как вам не хватает «thead». Чтобы правильно применить стили бутстрапа, вам нужно убедиться, что вы правильно настроили html.

<table class="table table-bordered"> 
    <thead> 
    <tr> 
     <th>#</th> 
     <th>First Name</th> 
     <th>Last Name</th> 
     <th>Username</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <th scope="row">1</th> 
     <td>Mark</td> 
     <td>Otto</td> 
     <td>@mdo</td> 
    </tr> 
    <tr> 
     <th scope="row">2</th> 
     <td>Jacob</td> 
     <td>Thornton</td> 
     <td>@fat</td> 
    </tr> 
    <tr> 
     <th scope="row">3</th> 
     <td>Larry</td> 
     <td>the Bird</td> 
     <td>@twitter</td> 
    </tr> 
    </tbody> 
</table> 

Answer 2

Решенный!

В SCSS файл добавить новый пользовательский класс:

.withoutTransfer{ 
    white-space: nowrap; 
} 

Затем используйте его в таблице:

<thead> 
    <tr class="withoutTransfer"> 
     .... 
    </tr> 
    </thead> 

Теперь заголовки таблиц выглядит.

Answer 3

попробовать это

настройки ширины для ваших ячеек таблицы, если применить правило «таблицы макета: фиксированная» к столу - это помогло мне много вопросов, клеточных размеров при использовании таблиц. Я бы не рекомендовал переходить на использование только DIVs для организации вашего контента, если он соответствует назначению таблиц - отображать многомерные данные.

`table-layout: fixed; width: 100%`;