Проблема с изменением размера таблиц - HTML, CSS

Question

Я начинаю с таблицами, поэтому у меня проблема с их изменением. То, что я сделал, - это если экран мало, содержимое таблицы будет идти друг за другом. Когда экран больше, width: 100%; не влияет на таблицу. Я хочу, чтобы он занимал пространство, подобное width: 100%.

Код:

HTML:

<table> 
    <tr> 
     <td> 
      <a href="about.php">About Me</a> 
     </td> 
     <td> 
      <a href="hall-of-fame.php">Hall of Fame</a> 
     </td> 
     <td> 
      <a href="contact.php">Contact Me</a> 
     </td> 
    </tr> 
</table> 

CSS:

table { 
    padding-left: 20px; 
    padding-right: 20px; 
    width: 100%; 
    border-collapse: separate; 
} 
td a{ 
    font-size: 25px; 
    display: inline-block; 
} 
td { 
    padding: 10px; 
    text-align: center; 
    border: 1px solid black; 
} 
td { 
    width: auto !important; 
    height: auto !important; 
    display: inline-block !important; 
} 
a { 
    text-decoration: none; 
} 

DEMO

Если у вас есть ответ/нашли ошибку в моем посте/не понимать что-то или нуждаться в более подробной информации, ответьте, пожалуйста.

Answer 1

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

https://jsfiddle.net/ru2fLtn2/1/

Я просто добавил следующий код ...

@media (max-width: 767px) { 
    td { 
    width: 100% !important; 
    } 
} 

Answer 2

Первое и самое важное:

Не использовать таблицы для ничего, кроме отображения табличные данные!

Второе:

Чтобы устранить проблему, добавьте

table { table-layout: fixed; } 

Это позволяет определить ширину таблицы.

Answer 3

, если я вас правильно понял вы хотите что-то вроде этого:

white-space: nowrap; 

это позволит предотвратить содержание иметь LINEBREAK

Просто добавьте его в свой CSS код в элемент таблицы

table { 
    padding-left: 20px; 
    padding-right: 20px; 
    width: 100%; 
    border-collapse: separate; 
    white-space: nowrap; 
    } 

Answer 4

Проблема в этой линии в td css:

display:inline-block !important; 

Также старайтесь избегать! Важно, если можете. Смотрите обновленный fiddle