Question

我想知道哪个是在自己的div中创建表的最佳方法，只是使用CSS来影响自己。

我不确定将它保存在自己的div中会更好。

<head>
<title>f.f. timetable</title>
<link rel="stylesheet" type="text/css" href="http://www.fightingfitlondon.co.uk/files/theme/timetable.css">
</head>
<body>
<div id="fftime" class="ff">
<table class="ff">
<thead>
<tr>
  <th></th>
  <th>Monday</th>
  <th>Tuesday</th>
  <th>Wednesday</th>
  <th>Thursday</th>
  <th>Friday</th>
  </tr>
  </thead>
  <tbody>
  <tr>
  <td>07:50&nbsp;- 08:35</td>
  <td rowspan="5">Sprint Training</td>
  <td>Sparring</td>
  <td rowspan="5">Class 1</td>
  <td rowspan="5">Class 2</td>
  <td rowspan="5">Class 3</td>
   </tr>
   <tr>
  <td rowspan="2">08:45&nbsp;- 10:30</td>
  <td rowspan="2">Skipping</td>
  </tr>
  <tr></tr>
  <tr>
  <td rowspan="2">10:40&nbsp;- 12:20</td>
  <td rowspan="2">Boxing</td>
   </tr>
   <tr></tr>
   <tr>
   <td colspan="6"></td>
   </tr>
   <tr>
   <td rowspan="2">13:25&nbsp;- 15:05</td>
   <td rowspan="4">Private Lesson</td>
   <td rowspan="2">Running Session</td>
   <td rowspan="4">Class 4</td>
   <td rowspan="4">Class 5</td>
   <td rowspan="4">Class 6</td>
  </tr>
  <tr></tr>
  <tr>
  <td rowspan="2">15:20&nbsp;- 17:00</td>
  <td rowspan="2">Conditioning</td>
   </tr>
   <tr></tr>
  </tbody>
  </table>
  </div>
  </body>
  </html>

的CSS

我似乎无法弄清楚哪个是id选择器的最佳展示位置。

 @import url(http://fonts.googleapis.com/css?family=Open+Sans:300);

 * {
   box-sizing: border-box;
   font-family: 'Open Sans', Helvetica, Arial, sans-serif;
 }

 html, body {
   height: 100%;
   margin: 0;
  }

 table {
  width: 100%;
  height: 100%;
  border-collapse: collapse;
  }

  thead th,
  tbody td:first-child:not([colspan="6"]) {
  background: #456;
   color: white;
  }

  tbody tr td:first-child {
    text-align: left;
 }

  tbody td:not(:first-child) {
   background: #EEF;
 }

  tbody td:not(:first-child):hover {
    background: #E8E8FF;
  }

  td[colspan="6"] {
   height: 5px;
   padding: 0;
 }

 th, td {
   width: 18.5%;
   padding: 1%;
   border: 1px solid #CCC;
   text-align: center;
   }

  th:first-child,
  td:first-child {
  width: 7.5%;
  }

Answer 1

如果它进入了自己的'div'标签

，这就是我的表格

<div id="AppendTableID/TableWrapperID">
     <table id="tableID" class="className">
     <thead>
     </thead>
        <tbody>
          <tr>
            <td></td>
            <td></td>
          </tr>
        </tbody>
     </table>
</div>

示例1：

#tableID
{
   //CSS
}

示例2

#tableID.className 
{
  //CSS
}

Answer 2

 Below sort of works, but just shows structure



    #ff.ffstyle {
   box-sizing: border-box;
   font-family: 'Open Sans', Helvetica, Arial, sans-serif;
   }

   #ff html, #ff body {
   height: 100%;
   margin: 0;
   }

    #ff table {
    width: 100%;
    height: 100%;
    border-collapse: collapse;
    }

    #ff thead #ff th,
    #ff tbody #ff td:first-child:not([colspan="6"]) {
    background: #456;
    color: white;
    }

    #ff tbody #ff tr #ff td:first-child {
    text-align: left;
    }

   #ff tbody #ff td:not(:first-child) {
   background: #EEF;
    }

   #ff tbody #ff td:not(:first-child):hover {
   background: #E8E8FF;
   }

   #ff td[colspan="6"] {
   height: 5px;
   padding: 0;
   }

   #ff th, #ff td {
   width: 18.5%;
   padding: 1%;
   border: 1px solid #CCC;
   text-align: center;
   }

   #ff th:first-child,
   #ff td:first-child {
   width: 7.5%;
   }

Answer 3

这似乎有效，虽然最后一个标签仍然反映并影响我的带有标签的导航菜单

var source = creep.pos.findClosest(FIND_SOURCES, {
    filter: function(source){
        return source.memory.workers < 2; //Access this sources memory and if this source has less then 2 workers return this source
    }
});
if(source){ //If a source was found
    creep.moveTo(source);
    creep.harvest(source);

    /* You should also increment the sources workers amount somehow, 
     * so the code above will know that another worker is working here. 
     * Be aware of the fact that it should only be increased once!
     * But I will leave that to the reader.
     */
}

Answer 4

Limtu

阅读你的评论你正在使用全局CSS规则，这些规则是实际的标签名称，例如table，th，thead，所以这将为你的所有表添加样式

以下是一个示例，希望这可以帮助您理解CSS规则

HTML：

 <div class="tableWrapper">
 <table id="tableID">
 <thead>

 </thead>
 <tbody class="tableBody">
 <tr>
      <td>Hello</td>
 </tr>
 </tbody>
 </table>
 </div>

CSS：

  .tableBody tr: nth-child(even) 
  {
       border-color: green;
  }

  .tableBody tr:nth-child(odd)
  {
       border-color: blue; 
   }

CSS id和class规则，拥有自己的整个div而没有单独的类的最佳选择

4 个答案: