използване на центъра за подравняване на текст в colgroup

имам таблица в моята страница, използвам colgroups, за да форматирам всички клетки в тази колона по същия начин, работи добре за цвета на фона и всичко останало. но не мога да разбера защо центърът за подравняване на текст не работи. не подравнява текста центрирано.

пример:

<table id="myTable" cellspacing="5">
    <colgroup id="names"></colgroup>
    <colgroup id="col20" class="datacol"></colgroup>
    <colgroup id="col19" class="datacol"></colgroup>
    <colgroup id="col18" class="datacol"></colgroup>

    <thead>
        <th>&nbsp;</th>
        <th>20</th>
        <th>19</th>
        <th>18</th>
    </thead>
    <tbody>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table>

CSS:

#names {
    width: 200px;
}

#myTable .datacol {
    text-align: center;
    background-color: red;
}

html css html-table css-tables
person Sander    schedule 06.08.2009    source източник

Отговори (4)


arrow_upward
114
arrow_downward

Само ограничен набор от CSS свойства се прилага за колони, а text-align не е един от тях.

За описание на защо е така.

Във вашия прост пример най-лесният начин да го поправите е да добавите тези правила:

#myTable tbody td { text-align: center }
#myTable tbody td:first-child { text-align: left }

Това ще центрира всички клетки на таблицата, с изключение на първата колона. Това не работи в IE6, но в IE6 text-align прави всъщност (погрешно) работи върху колоната. Не знам дали IE6 поддържа всички свойства или само по-голямо подмножество.

О, и вашият HTML е невалиден. <thead> пропуска <tr>.

person mercator    schedule 06.08.2009
comment
така че вие ​​казвате, че просто не е възможно и единственият начин да се постигне това е да се направи на самия TD елемент тогава - person Sander; 06.08.2009
comment
да Добавих корекция за вашия пример, но това няма да работи, ако таблицата стане по-сложна. DisgruntledGoat предоставя още няколко решения. - person mercator; 06.08.2009
comment
И двете предложения относно липсващия tr в рекламата също са невалидни. th не принадлежи към tbody и td не принадлежи към thead. Просто добавете tr, за да съдържа th в рекламата. - person graywh; 12.11.2010
comment
@graywh, съгласен съм, че е най-добре да запазите th в thead, така че премахнах предложенията си. Все пак е напълно валидно и може би е подходящо да имате th в tbody или td в thead. напр. колона със заглавки не може да влиза в thead, а описанията на заглавки могат да влизат в tds в thead. Но тук вероятно не е така. - person mercator; 13.11.2010
comment
@wtjones, това е така, защото IE quirks mode (във всяка версия на IE) по същество е същият като IE5.5 (така че не го използвайте!). Ако нямате избор, можете да го накарате да работи в режим quirks по същия начин, както в IE6 (т.е. като зададете text-align на col/colgroup така или иначе). - person mercator; 21.12.2011
comment
Елементите ‹col› поддържат само 3 стилови правила: рамка, фон, ширина и видимост. Повече подробности: stackoverflow.com/a/1238151/1158647 - person Misi; 22.07.2015

arrow_upward
25
arrow_downward

Вижте подобен въпрос: Защо колоните в таблицата за стилизиране не са разрешени?

Имате право да задавате само свойства на граница, фон, ширина и видимост поради факта, че клетките не са не са директни наследници на колони, а само на редове.

Има няколко решения. Най-простият е да добавите клас към всяка клетка в колоната. За съжаление това означава повече HTML, но не би трябвало да е проблем, ако генерирате таблици от база данни и т.н.

Друго решение за съвременните браузъри (т.е. не IE6) е използването на някои псевдокласове. tr > td:first-child ще избере първата клетка в реда. Opera, Safari, Chrome и Firefox 3.5 също поддържат селектора :nth-child(n), така че можете да насочвате към конкретни колони.

Можете също така да използвате td+td, за да изберете от втората колона нататък (това всъщност означава "изберете всички td елементи, които имат един td елемент отляво). td+td+td избира от третата колона - можете да продължите по този начин, заменяйки свойствата. Честно казано обаче , това не е страхотен код.

person DisgruntledGoat    schedule 06.08.2009

arrow_upward
4
arrow_downward

Със следния CSS можете просто да добавите един или повече класове към елемента таблица, за да подравните съответно колоните му.

CSS

.col1-right td:nth-child(1) {text-align: right}
.col2-right td:nth-child(2) {text-align: right}
.col3-right td:nth-child(3) {text-align: right}

HTML

<table class="col2-right col3-right">
  <tr>
    <td>Column 1 will be left</td>
    <td>Column 2 will be right</td>
    <td>Column 2 will be right</td>
  </tr>
</table>

Пример: http://jsfiddle.net/HHZsw/

person Fred    schedule 14.08.2013
comment
вярно, макар и малка забележка: тези селектори са CSS3 селектори и могат да се използват в IE9 и по-нови. Ако имате нужда от поддръжка за по-ниски версии на IE, не можете да използвате този метод. - person Sander; 14.08.2013

arrow_upward
0
arrow_downward

В допълнение към ограниченията, споменати в други отговори, от февруари 2018 г. visibility:collapse все още не работи на colgroups в Chrome и браузъри, базирани на Chromium, поради грешка. Вижте „CSS col visibility:collapse не работи в Chrome ". Така че вярвам, че текущо използваемите свойства са само рамка, фон, ширина (освен ако не използвате някакъв вид polyfill за Chrome и други базирани на Chromium браузъри). Грешката може да бъде проследена на https://crbug.com/174167.

person Jacob C.    schedule 22.02.2018