Как упорядочить столбцы таблицы CSS

Question

В моем веб-приложении представлены многочисленные страницы, отображающие табличные данные (как правило, списки объектов с примерно 5 свойствами, отображаемыми на объект).

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

Вот пример того, что у меня есть ...

table.mytblname2 td.stuff { width: 10%; } 
table.mytblname2 td.this { width: 10%; } 
table.mytblname2 td.that { width: 10%; } 
table.mytblname2 td.something { width: 70%; } 

table.mytblname3 td.anothercol { width: 25%; } 
table.mytblname3 td.stuff { width: 25%; } 
table.mytblname3 td.foo { width: 20%; } 
table.mytblname3 td.bar { width: 20%; } 
table.mytblname3 td.something { width: 10%; } 

Как я вижу это, класс = "anothercol" и стиль = "ширина: 20%" использовать точно такое же количество поэтому я потенциально использую больше полосы пропускания, взбалтывая свой файл CSS в этом конкретном сценарии.

Это что-то, что можно улучшить? Как?

Приложение использует ASP.NET MVC 2, и мне нужно, чтобы он был совместим с несколькими браузерами вплоть до IE6 и не делал его нечитаемым, когда пользователи отключены JavaScript.

UPDATE:

Вот подход, который я в конечном итоге принимает (на основе ответов от ddagradi и Джейсона).

table.data { width: 100%; ... etc ... } 
table.data td, table.data th { padding: 4px; border: ... etc ... } 

table.data th.w10 { width: 10%; } 
table.data th.w20 { width: 20%; } 
table.data th.w30 { width: 30%; } 
table.data th.w40 { width: 40%; } 
... etc ... 

<table class="data"> 
    <thead> 
    <tr> 
     <th class="w20">Date</th> 
     <th class="w40">Name</th> 
     <th class="w40">Description</th> 
    </tr> 
    </thead> 
    <tbody> 
    ... 
    </tbody> 
</table> 

Мой CSS-файл МНОГО очиститель, и я могу сказать в HTML, что такое ширина. Я управляю общим стилем td/th через «table.data td» и «table.data th». Спасибо всем!

Answer 1

Как правило, таблица будет пытаться предоставить всем столбцам единую ширину, причем приоритет должен указываться столбцами с более длинным контентом. Если вы указали только ширину столбца, который должен быть более широким (например, 1 в каждой из этих таблиц), вы, вероятно, закончите с макетом, который будет отлично работать.

Что касается использования встроенного CSS, считается, что это плохая форма для смешивания контента и стилей, и вы действительно должны хранить все свои стили в таблицах стилей. Если вы чувствуете, что ваш CSS становится раздутым, попытаться выяснить, какие стили могут быть сжаты, потому что они такие же, как:

td.foo, td.bar { width: 40%; } 

Таким образом, если вам нужно изменить отображение одного элемента страницы, ваш стили остаются неизменными на вашем сайте.

Answer 2

Вы можете попробовать сочетание столбцов таблицы, которые имеют те же свойства и удалить все избыточные декларации:

.stuff, .this, .that { width: 10%; }