使用顶部，底部和右侧数据格式化表格单元格

时间：2017-09-23 15:32:59

标签： html css

我正在尝试在表格单元格中显示信息列表，但我无法正确使用css。我已经阅读了有关将div发送到单元格底部的帖子，并尝试了位置相对父级 - ＆gt;绝对的孩子。我仍然无法破解它 - 你能帮忙吗？

我在这里创造了一个小提琴（https://jsfiddle.net/ngm6uavo/10/），它呈现了一个单行足球装备表（它将是多排）。每个单元格都包含一个团队的夹具数据，这些数据可能在家或远离。如果回家：反对，开球，投球，参考。如果离开：反对。两者都有一个'状态'标签（未经证实/确认），如果是杯赛，可选择显示一个杯子图像。

我想要在从单元格顶部开始的各个后续行上渲染的装置数据，无论是在家还是在外。任何一行的数据都可以包含长文本，例如“裁判：有一个真正长名的人”我希望坐在底部的“状态”标签，每个单元格中的每一个都应该彼此对齐。夹具数据和状态标签都保持对齐。我想要显示的杯子图像如果显示在右下方（与状态标签相同的基线）。

我已经尝试过不同的方法，你可以从小提琴中看到; div，span和一个<br> s（不好）的单元格。我认为使用div会效果最好，但我非常愿意接受可能更容易解决的建议（例如单元格中的表格/表格）。

你可以看到我已经包含了bootstrap样式表来美化表，我认为它不会干扰。

的CSS：

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

table, thead, tbody, tr, td{
        position: relative;
    }

    .td-fixture{
        background-color: #eaeded;
        border: 1px solid #ccd1d1 ;
        padding: 10px;
        position: relative;
    }

    .date-span{
        text-align: center;
    }

    .date-hdr {
        text-align: center;
        font-weight: normal;
        font-size:20px;
        vertical-align:middle !important;
        color: #21618C;
        background-color: #d6eaf8;
        border-top: 3px solid #ccd1d1  !important;
        border-left: 3px solid #ccd1d1  !important;
        border-bottom: 3px solid #ccd1d1  !important;
    }

    .fixture-hdr {
        text-align: center;
        font-weight: normal;
        font-size:20px;
        color: #21618C;
        background-color: #d6eaf8;
        padding-bottom: 2px;
        border-top: 3px solid #ccd1d1  !important;
        border-left: 3px solid #ccd1d1  !important;
        border-right: 3px solid #ccd1d1  !important;
        border-bottom: none !important;
    }

    .fixture-subhdr {
        text-align: center;
        font-size:15px;
        font-weight: normal;
        color: #21618C;
        background-color: #d6eaf8;
        padding-top: 2px;
        border-top: none !important;
        border-left: 3px solid #ccd1d1  !important;
        border-right: 3px solid #ccd1d1  !important;
        border-bottom: 3px solid #ccd1d1  !important;
    }

    .textBoxStyle{
        text-align:left;
        padding-left: 10px;
        padding-right: 10px;
        border-radius: 3px;
        border:1px outset #9a9;
        background: #e5e8e8;
        -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
        -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
    }

    .fixtureLabel{
        font-weight:bold;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
    }

    .fixtureUnconfirmed{
        color: #ff0000;
    }

    .fixtureConfirmed{
        color: #269816 ;
    }

    .fx-input{
        background: #fffdbf;
        border-radius: 5px;
    }

    td.div-container{
        position:absolute;
        top: 0;
    }

    td.div-status{
        position:absolute;
        bottom: 0;
    }

    td.div-cup{
        position:absolute;
        bottom: 0;
        right:0;
    }

HTML：

<h2>Saturday Teams</h2>
  <table id="tbl-sat-1">
    <thead>
      <tr>
        <th rowspan="2" class="date-hdr">Date</th>
        <th class="fixture-hdr" id="29">U7 Lions</th>
        <th class="fixture-hdr" id="33">U9 Tigers</th>
        <th class="fixture-hdr" id="41">U10 Bears</th>
        <th class="fixture-hdr" id="38">U10 Sharks</th>
      </tr>
      <tr>
        <th class="fixture-subhdr">EBFA A</th>
        <th class="fixture-subhdr">EBFA A</th>
        <th class="fixture-subhdr">EBFA C</th>
        <th class="fixture-subhdr">EBFA A</th>
      </tr>
    </thead>
    <tr class="tr-fixtures">
      <td class="td-fixture date-span">
        <span>2017-09-16</span>
      </td>
      <td class="td-fixture">
        <div class="div-container">
            <span class="fixtureLabel">Reeves Rangers</span><br/>
            <span class="fixtureLabel">Kickoff: </span><span>10:00</span><br/>
            <span class="fixtureLabel">Pitch: </span><span>11as pitch 2</span><br/>
            <span class="fixtureLabel">Referee: </span><span>Appointed</span><br/>
            <div class="div-status">
                <span class="fixtureUnconfirmed textBoxStyle">Unconfirmed</span>
            </div>
            <div class="div-cup">
                <img id='cup' src='http://nplyouthfootball.co.uk/wp-content/themes/twentytwelve-child/images/gold-cup.png' style='width:28px;height:35px;'/>
            </div>
        </div>
      </td>
      <td class="td-fixture">
        <div class="div-container">
            <div><span class="fixtureLabel">Reeves Rangers</span><br/></div>
            <div><span class="fixtureLabel">Kickoff: </span><span>10:00</span></div>
            <div><span class="fixtureLabel">Pitch: </span><span>11as pitch 2</span></div>
            <div><span class="fixtureLabel">Referee: </span><span>Appointed</span></div>
            <div class="div-status">
                <span class="fixtureUnconfirmed textBoxStyle">Unconfirmed</span>
                <img id='cup' src='http://nplyouthfootball.co.uk/wp-content/themes/twentytwelve-child/images/gold-cup.png' style='width:28px;height:35px;'/>
            </div>
        </div>
      </td>
      <td class="td-fixture">
        <div class="div-container">
            <span class="fixtureLabel">Reeves Rangers</span><br/>
            <span class="fixtureLabel">Kickoff: </span><span>10:00</span><br/>
            <span class="fixtureLabel">Pitch: </span><span>11as pitch 2</span><br/>
            <span class="fixtureLabel">Referee: </span><span>Appointed</span><br/>
        </div>
        <div class="div-status">
            <span class="fixtureUnconfirmed textBoxStyle">Unconfirmed</span>
            <img id='cup' src='http://nplyouthfootball.co.uk/wp-content/themes/twentytwelve-child/images/gold-cup.png' style='width:28px;height:35px;'/>
        </div>
      </td>
      <td class="td-fixture">
        <div class="div-container">
            <span class="fixtureLabel">Reeves Rangers</span><br/>
            <div class="div-status">
                <span class="fixtureUnconfirmed textBoxStyle">Unconfirmed</span>
                <img id='cup' src='http://nplyouthfootball.co.uk/wp-content/themes/twentytwelve-child/images/gold-cup.png' style='width:28px;height:35px;'/>
            </div>
        </div>
      </td>
    </tr>
  </table>

感谢您的任何建议。

1 个答案:

答案 0 :(得分：0)

首先，您忘记加入<tbody>

其次，如果您希望vertical-align工作，则不应包含bootstrap

总而言之，我认为你真的需要提高你的css和html技能，使表格看起来像你想象的那样。这是Pen现成的桌子：

https://codepen.io/anon/pen/QqGMXp?editors=1100

改进清单会很长，最重要的事情 -  块中的定位（因为你已经尝试过div-s）并不复杂，尽量保持代码干燥，因为当你的数据增长时，代码质量也会增长。此外，尝试应用＆＃34; keep-dry-rule＆＃34;对于样式，当您以相同的方式设置3个边框时，可以更容易地设置所有边框并从中排除1（例如）。

我将留下您学习以下材料的建议：

https://www.codecademy.com/en/tracks/htmlcss https://www.udemy.com/html-and-css-for-beginners-crash-course-learn-fast-easy/

这些简单的课程涵盖了基础知识，但它们肯定会提高你的技能

相关问题
最新问题