如何在css文件中添加一個現有的類到td中？

我想將Bootstrap中的text-center類應用於我表中的所有td單元。但我不要想爲此做所有40 td s：<td class="text-center"></td>如何在css文件中添加一個現有的類到td中？

顯然這是行不通的;

#mytable td { 
    text-center; //class already exists 
}

那麼，如何在一個CSS文件將此類我td S'

2016-04-27 Da Best

我的理解是否正確，您是否不想手動將'class =「text-center」'寫入所有'td'？ –

@AlexanderLomia是的，我認爲這就是他的意思。 –

[在Twitter Bootstrap中對錶格中的文本進行居中可能的重複]（http://stackoverflow.com/questions/11678298/centering-text-in-a-table-in-twitter-bootstrap） –

是的，但不是純粹的CSS。

可以在LESS做到這一點，是這樣的：

#mytable td { 
    .text-center; 
}

或者你也可以使用jQuery類添加到您當前的TD元素

$('#mytable td').addClass('text-center');

2016-04-27 13:35:43

如果你不希望添加手寫課，你可以寫一個腳本，如

JavaScript

var tdList = document.querySelectorAll('#mytable td'); 
[].forEach.call(tdList, function(el){ 
    el.classList.add('text-center'); 
});

的jQuery：

$('#mytable td').addClass('text-center');

如果不是這樣，就可以實現通過添加CSS類似如下效果：

#mytable td { 
    text-align: center; 
}

另外，如果你使用智能文本編輯器，如昇華或支持多個遊標的括號中，您可以簡單地使用鼠標選擇所有<td>，並且只寫一次class="text-center"。例如在括號中，您可以通過按住Ctrl並單擊要添加光標的位置來完成此操作。

如果安裝像emmet一個擴展，你可以簡單地寫

#mytable>td.text-center*40

，然後按Ctrl鍵+ Alt鍵輸入，可以生成整個標記。真的，如果你懶惰打字......他們有很多方法。

2016-04-27 13:35:51

爲什麼我沒有想到在我的答案中使用'document.querySelectorAll（'＃mytable td'）'。做得很好。 –

我假設JavaScript代碼是ES6。正確？ –

@DaBest不...沒有ES6 ... –

因爲我認爲你使用的是純CSS，所以最簡單的解決方案可能只是將代碼複製到樣式表中，除非違反許可證。如果您使用的是預處理器（如SASS），則可以使用@extend .text-center功能，這是我強烈建議的。¨

另一種解決方案是使用JavaScript，但這不完全可靠。

2016-04-27 13:40:04

如果我正確地理解了你的問題，你不希望將所需的類逐個寫入所有的td。相反，你可以隨時使用搜索和編輯器（CTRL + [R在PHPstorm在這種情況下）的替換功能：

使用其他方法，如JS或額外的CSS會最多不必要地浪費資源，最糟糕的情況是會在代碼中引入混淆。

2016-04-27 13:50:43

要在CSS中做到這一點，你可以這樣做：

#tableId td { 
    text-align: center; 
}

，如果你不介意將居中文本到所有細胞（包括<th/>）您可以將text-center類在html：

<table class="table text-center"> 
    ... 
<table>

2016-04-27 13:51:26 w3jimmy

回答