w3-стол столбец неравный ширина размер

I использование w3css с классом w3-стол. Я установил ширину для каждого «td» с шириной 35 пикселей и высотой 35 пикселей. Я узнал, что ширина по-прежнему меняется в соответствии с текстом.w3-стол столбец неравный ширина размер

Вот мой код:

<!DOCTYPE html> 
<html> 
<title>W3.CSS</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css"> 
<style> 
    .box{ 
     width: 35px; 
     height: 35px; 
     border: 1px solid black; 
    } 

    .yellow { 
     background-color: yellow !important; 
    } 
</style> 
<body> 

<table class="w3-table"> 
    <tbody> 
     <tr> 
     <td class="box yellow">20</td> 
     <td class="box yellow">1000</td> 
     <td class="box yellow">2</td> 
     <td class="box yellow">10</td> 
     <td class="box yellow">1000</td> 
     </tr> 
     <tr> 
     <td class="box yellow">&nbsp;</td> 
     <td class="box yellow">&nbsp;</td> 
     <td class="box yellow">&nbsp;</td> 
     <td class="box yellow">&nbsp;</td> 
     <td class="box yellow">&nbsp;</td> 
     </tr> 
    </tbody> 
</table> 

</body> 
</html>

В случае, когда я придаю вывод результата, как показано ниже:

Там есть A, B, C, D, столбец E помеченный для легкого мне объяснить. А с текстом 20 B с текстом 1000 C с текстом 2 D с текстом 10 Е с текстом 1000

А и столбца D имеют две цифры текст т.е. 20 и 10 соответственно. Я ожидал, что A и D имеют одинаковую ширину, но результат результата показал, что ширина немного больше D. Я могу заключить, что первый столбец всегда немного больше по сравнению с другим столбцом. Я также заметил, что ширина столбца изменяется в соответствии с количеством текста. Пример 1000 в колонке B и E ширина больше 2 в колонке C.

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

Я ценю, если вы можете дать мне несколько советов по этому вопросу.

источник

2017-02-21 HenryLoke

Ваша идея является ошибкой. Почему вы даете фиксированную ширину 35 пикселей для каждого столбца, когда ваша таблица имеет ширину 100%? Это является причиной вашей проблемы. Используйте проценты и свойство min/max-width при необходимости. – plvice

Я ценю, если вы можете показать мне правильную идею с измененным исходным кодом. Спасибо. – HenryLoke

Сделайте это изменение

.yellow { 
    background-color: yellow !important; 
    max-width:35px; 
}

Это сделает ширину равной для всех столбцов, даже если она имеет большое значение. Вот пример работы:

.box{ 
 
    width: 35px; 
 
    height: 35px; 
 
    border: 1px solid black; 
 
} 
 
.yellow { 
 
    background-color: yellow !important; 
 
    max-width:35px; 
 
}

<!DOCTYPE html> 
 
    <html> 
 
    <head> 
 
     <title>W3.CSS</title> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
     <link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css"> 
 
    </head> 
 

 
    <body> 
 
    <table class="w3-table"> 
 
     <tbody> 
 
      <tr> 
 
      <td class="box yellow">20</td> 
 
      <td class="box yellow">1000</td> 
 
      <td class="box yellow">289834595</td> 
 
      <td class="box yellow">10</td> 
 
      <td class="box yellow">1000</td> 
 
      </tr> 
 
      <tr> 
 
      <td class="box yellow">&nbsp;</td> 
 
      <td class="box yellow">&nbsp;</td> 
 
      <td class="box yellow">&nbsp;</td> 
 
      <td class="box yellow">&nbsp;</td> 
 
      <td class="box yellow">&nbsp;</td> 
 
      </tr> 
 
     </tbody> 
 
    </table> 
 
    </body> 
 
    </html>

источник

2017-02-21 10:04:19

Благодарим вас за ответ. Он фиксирует проблему ширины. Кстати, можно ли исправить также первое заполнение столбца? – HenryLoke

Можете ли вы уточнить, не могли получить ваш вопрос[email protected] –

Кстати, @HenryLoke, если ответ исправил вашу проблему, вы можете пометить ее как принятую с помощью галочки. –

Добавить это в CSS файле

table{ 
    table-layout: fixed; 
    width: 300px;

}

вот ссылка http://codepen.io/myco27/pen/oBKWYq

источник

2017-02-21 09:49:42

Вы можете попытаться изменить CSS класса коробки от 35px до 20%

.box{ 
    width: 20%; 
    height: 35px; 
    border: 1px solid black; 
}

источник

2017-02-21 09:49:49

Благодарим за ответ. Число столбцов изменится на 3, 4 или 5 столбцов. Мы не можем исправить 20%, если 5 строк и стать 25%, если 4 ряда и т. Д. – HenryLoke

, если у вас есть динамические столбцы. Просто попробуйте добавить следующий стиль .w3-table { table-layout: fixed; } –

w3-стол столбец неравный ширина размер

ответ

Смежные вопросы