[英]How to override default css of table
This question is already on stackoverflow. 这个问题已经在 stackoverflow 上了。 But the solutions are not working for me.
但解决方案对我不起作用。 Actually I'm working on an Angular project.
实际上我正在做一个 Angular 项目。 I want to align
Mode of comparison
and the corresponding Dropdown
in the middle with respect to each other.我想将
Mode of comparison
和中间的相应Dropdown
相互对齐。 Here is the widget that I'm creating.这是我正在创建的小部件。 I've clearly marked that part in the image:
我已经在图片中清楚地标记了该部分:
Here is my HTML: Note: pt-label
, dls-combobox
and dls-option
are my custom made angular components.这是我的 HTML: 注意:
pt-label
、 dls-combobox
和dls-option
是我定制的角度组件。
<table>
<tbody>
<tr class="my-row">
<td class="first-col1">
<div class="comparing-switch1">
<pt-label>Mode of comparison </pt-label>
</div>
</td>
<td class="second-col1">
<div class="comparing-label1">
<dls-combobox placeholder="Time average">
<dls-option>
<pt-label>Time average</pt-label>
</dls-option>
</dls-combobox>
</div>
</td>
</tr>
</tbody>
</table>
and here is my CSS:这是我的 CSS:
.my-row {
background: cornflowerblue;
}
.first-col1 {
background: magenta;
width: 50% !important;
}
.second-col1 {
width: 100%;
background: blueviolet;
padding-bottom: 10px;
}
table.stats tbody tr:nth-child(even) {
vertical-align: middle !important;
}
table.stats tbody tr {
vertical-align: middle !important
}
Even If I try to set it through margin
and padding
then both of them gets shifted even when the class names are different.即使我尝试通过
margin
和padding
设置它,即使类名不同,它们也会移动。 One more thing I noticed.我还注意到一件事。 When I inspect the element
table
.当我检查元素
table
时。 When I remove vertical-align: baseline
from these two places (as marked in the picture below) the my problem is solved:当我从这两个地方删除
vertical-align: baseline
时(如下图所示),我的问题就解决了:
What is wrong with my code.我的代码有什么问题。 Please correct me.
请纠正我。
Here vertical-align: baseline
property is applied to the table.这里
vertical-align: baseline
属性应用于表格。 vertical-align: middle !important
is applied for tr element. vertical-align: middle !important
适用于tr元素。 since table has that property tr itself aligned in baseline.因为 table 具有该属性 tr 本身在基线中对齐。 try adding
vertical-align: middle
for the table尝试为表格添加
vertical-align: middle
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.