Question

我正在创建一个table来显示不同的度假套餐。包含包名称，包含的夜数和成本的单元格必须以文本为中心。包含描述的单元格需要使文本左对齐。

在我的CSS文件中，这就是我对表格单元格的看法

td, th { border: 1px solid #3399CC; }
td { text-align: centered; }
.text td { text-align: left; }

当我尝试将文本类应用于HTML文件中的td元素时，它适用于整个表格。

我编辑的行看起来像这样

<td class="text" headers="description">...</td>

其他行只是

<td headers="name">...</td>

我需要采取哪些不同的做法？

Answer 1

看起来你有拼写错误。文本对齐应设置为center而不是centered。

另外，删除td .text td { text-align: left; }使其成为

.text { text-align: left; }

你应该做得好。

Answer 2

关于CSS选择器如何工作的一个简单错误。

每个空间都意味着＆＃34;孩子＆＃34;如果你愿意的话。

.text td表示＆＃34;在课程中找到一个元素＆＃39; text＆＃39;并将X风格应用于它的“t＆＃39; 子＆＃34;

如果您要将td类型应用于text，则不需要任何空格;格式化如下：

td.text，这意味着＆＃34;为某个类找到一个text的td元素＆＃34;

您也可以通过这种方式链接多个类。

td#unique.text.thingy表示＆＃34;查找标识为unique的td元素，类text和类thingy＆＃34;

因此给予

td, th {border: 1px solid #3399CC;}
td {text-align: centered;}
td.text {text-align: left}

Answer 3

您需要做的是创建类并在要应用于所需样式的列上应用羽毛，例如：

<强> HTML

<table>
  <tr>
    <th>title 1</th>
    <th>title 2</th>
    <th>title 3</th>
  </tr>
  <tr>
    <td>text</td>
    <td class="text-justify">more info 1</td>
    <td class="text-left">$1000 </td>
  </tr>
  <tr>
    <td>text</td>
    <td class="text-justify">more info more 1</td>
    <td class="text-left">$ 100</td>
  </tr>
  <tr>
    <td>text</td>
    <td class="text-justify">more info 1</td>
    <td class="text-left">$ 100000</td>
  </tr>
</table>

<强> CSS

table { 
 border-spacing: 0px;
 border-collapse: collapse;
}
td, th {
  border: 1px solid #3399CC;
  padding : 4px 8px;
}

.text-justify {
  text-align: justify
}
.text-left {
  text-align: left
}

请参阅链接https://jsfiddle.net/davidcostadev/fwz0w722/

将类分配给HTML

3 个答案: