Question

我正在设计2张桌子的样式，其中一张用于台式机/平板电脑，另一张用于移动电话。我的问题在于，取决于我首先定义的表是从其他表中借鉴一些样式的表。

css：

table.table-payments{
    border-collapse: collapse;
    width: 100%;  
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.04);
    border-radius:5px;
    box-shadow: var(--box-shadow-type-2);

}

table.table-payments > tr, thead, td, th {
    padding:5px 15px;
    text-align: left;
    border-bottom: 1px solid var(--brand-light-gray-2);
    border-radius: 5px;
    font-size: var(--text-size);
    height: 60px;
}


table.payments-mobile > tr, td, th{
    text-align: left;
    height: auto;
    border: none;
}
table.payments-mobile > tbody{
    background-color: var(--brand-white);
    margin:5px 0;
    border-radius: 4px;
    box-shadow: var(--box-shadow-type-2);
}

image showing chrome style inspector

Answer 1

您通常在CSS中定义元素的样式。您应该更具体地定义它们，为每个元素声明特定的表。所以代替：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<ul class="main-nav">
  <li><a href="#home_div">Home</a></li>
  <li><a href="#about_div">About</a></li>
  <li><a href="#portfolio_div">Portfolio</a></li>
  <li><a href="#contact_div">Contact</a></li>
</ul>
<div id="content-container">
  <div id="home_div">Home</div>
  <div id="about_div">About</div>
  <div id="portfolio_div">Portfolio</div>
  <div id="contact_div">Contact</div>
</div>

您应该这样做：

table.payments-mobile > tr,
td,
th {
  text-align: left;
  height: auto;
  border: none;
}

CSS表“借用”另一表的样式

1 个答案: