将div或spans放入td' s

时间:2016-01-16 07:53:50

标签: html css

我有一张td的基本表格。

我希望能够在td的顶部显示即将发布的标志。我已经很快完成了div和span的签名,我需要两个来做即将到来的签名。

但我不能很快将即将到来的td内的文字。目前的结果是他们最终在不同的行

如何使用css将文本和即将发布的文章放在一起?

想要的结果看起来类似于我的世界主页:

The wanted result

注意:即将到来的标志会被轮换,以便分开。

4 个答案:

答案 0 :(得分:1)



table{
  width: 100%;
  background: lightblue;
  
}
.header{
  text-align: center;
  background: lightblue;
  padding: 30px;
  margin: 0;
}
table, th, td, .header {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
    text-align: left;
}

<table>
  <h2 class="header">Comming soon</h2>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>
&#13;
&#13;
&#13;

很简单&#34;假&#34;你正在寻找什么用css作为表本身没有任何标签来实现这一点。

我不确定你实际上想要实现的目标,所以我尽力将你的想法转化为某种东西。

答案 1 :(得分:0)

尝试仅添加span元素(div表示换行符)

Map <String, Integer>map = sortByValues(leagueTable);

            int counter = 1;
            int previousScore = 0;
            int relativeCount = 0;
            int n= 0;
            for (Map.Entry<String, Integer> entry : map.entrySet())
            {

               int value = entry.getValue();


               if(previousScore == entry.getValue()){

                   if(n == 0){

                      relativeCount = counter-1;  

                   n++;
                   }
               System.out.println(relativeCount + " " + entry.getKey() + "," + entry.getValue() + " pts");

               }
               else{
               n=0;
               System.out.println(counter + " " + entry.getKey() + "," + entry.getValue() + " pts");
                previousScore = entry.getValue();

               } 
               counter++;

            }

答案 2 :(得分:0)

或者可能有帮助 - http://jsbin.com/zicoxakuzu/1/edit?html,output

<table>
  <th>Text</th>
  <th></th>
  <tr>
    <td>text1</td>
    <td><div class="a"><span class="b">Coming Soon</span></div> </td>
  </tr>
   <tr>
    <td>text2</td>
    <td><div class="a"><span class="b">Coming Soon</span></div> </td>
  </tr>
</table>

答案 3 :(得分:-1)

http://jsbin.com/zicoxakuzu/edit?html,output  我认为这就是你的意思..检查出来。

<body>
<table>
  <tr>

    <td>
      <div class="a"><span class="b">Coming Soon</span></div>
      text1</td>

  </tr>
   <tr>

    <td><div class="a"><span class="b">Coming Soon</span></div>
      text2</td>
  </tr>
</table>
</body>