Question

我已经构建了一个Web应用程序，并且正在使页面具有移动响应能力。具体来说，我正在处理表格。我发现有一篇文章解释了如何使屏幕较小的平板电脑和手机将桌子从水平切换到垂直。效果很好，但是页面上有3个表，我不确定如何为3个不同的表改编CSS。

写作：https://www.liquidlight.co.uk/blog/article/tables-in-responsive-design/

代码演示：https://codepen.io/team/css-tricks/pen/wXgJww?editors=1100

我遇到问题的部分是单元格的标签。 CSS使用：

td:before {
            /* Now like a table header */
            position: absolute;
            /* Top/left values mimic padding */
            top: 0;
            left: 6px;
            width: 45%;
            padding-right: 10px;
            white-space: nowrap;
        }

        /*
        Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync.       */
        td:nth-of-type(1):before { content: "No Longer with Parish"; }
        td:nth-of-type(2):before { content: "Position"; }
        td:nth-of-type(3):before { content: "Name, City"; }
        td:nth-of-type(4):before { content: ""; }
        td:nth-of-type(5):before { content: "Religious Affiliation"; }
        td:nth-of-type(6):before { content: "Virtus"; }
        td:nth-of-type(7):before { content: "Background Check"; }
        td:nth-of-type(8):before { content: "Standard Code of Conduct"; }
        td:nth-of-type(9):before { content: "Technology / Social Media"; }
        td:nth-of-type(10):before { content: "Youth (under 18) Code of Conduct"; }
    }

CSS在包含该项目标签的行中的每个单元格之前添加一个单元格。如果所有表都显示相同的数据并且可以使用相同的标签，那就很好了。问题是他们没有。 3个表的列数也不同。

如何调整CSS以区分3个表？我是否应该在每个td单元格中使用ID，例如id =“ One”； id =“两个”； id =“ Three”，然后定位td id？

我尝试将id =“ one”添加到第一个单元格，并使用以下CSS添加标签，但无法显示该标签：

td#one:before { content: "label"; }
td#one:nth-of-type(1):before { content: "label"; }  
#one:before { content: "label"; }
#one:nth-of-type(1):before { content: "label"; }

在Visual Studio的设计窗口中，该单元格称为td＃one，因此我认为CSS的前两行之一可以工作。没有标签显示。有人可以解释如何引用单元格以便显示标签吗？一旦我开始工作，表1将具有1到9的单元格，表2将具有10到19的单元格，表3将具有20到28的单元格。

也许我可以将标签添加到div内的主td单元格中，该div使用媒体查询不显示任何内容或内联。

Answer 1

使用nth-child代替nth-of-type。

th:nth-child(1):before{content:'First Name'}
th:nth-child(2):before{content:'Last Name'}
th:nth-child(3):before{content:'Job Title'}
th:nth-child(4):before{content:'Favorite Color'}
th:nth-child(5):before{content:'Wars or Trek?'}
th:nth-child(6):before{content:'Secret Alias'}
th:nth-child(7):before{content:'Date of Birth'}
th:nth-child(8):before{content:'Dream Vacation City'}
th:nth-child(9):before{content:'GPA'}
th:nth-child(10):before{content:'Arbitrary Data'}

<table border="1">
<thead>
<tr>
  <th></th>
  <th></th>
  <th></th>
  <th></th>
  <th></th>
  <th></th>
  <th></th>
  <th></th>
  <th></th>
  <th></th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row">
  <td role="cell">James</td>
  <td role="cell">Matman</td>
  <td role="cell">Chief Sandwich Eater</td>
  <td role="cell">Lettuce Green</td>
  <td role="cell">Trek</td>
  <td role="cell">Digby Green</td>
  <td role="cell">January 13, 1979</td>
  <td role="cell">Gotham City</td>
  <td role="cell">3.1</td>
  <td role="cell">RBX-12</td>
</tr>
<tr role="row">
  <td role="cell">The</td>
  <td role="cell">Tick</td>
  <td role="cell">Crimefighter Sorta</td>
  <td role="cell">Blue</td>
  <td role="cell">Wars</td>
  <td role="cell">John Smith</td>
  <td role="cell">July 19, 1968</td>
  <td role="cell">Athens</td>
  <td role="cell">N/A</td>
  <td role="cell">Edlund, Ben (July 1996).</td>
</tr>
<tr role="row">
  <td role="cell">Jokey</td>
  <td role="cell">Smurf</td>
  <td role="cell">Giving Exploding Presents</td>
  <td role="cell">Smurflow</td>
  <td role="cell">Smurf</td>
  <td role="cell">Smurflane Smurfmutt</td>
  <td role="cell">Smurfuary Smurfteenth, 1945</td>
  <td role="cell">New Smurf City</td>
  <td role="cell">4.Smurf</td>
  <td role="cell">One</td>
</tr>
<tr role="row">
  <td role="cell">Cindy</td>
  <td role="cell">Beyler</td>
  <td role="cell">Sales Representative</td>
  <td role="cell">Red</td>
  <td role="cell">Wars</td>
  <td role="cell">Lori Quivey</td>
  <td role="cell">July 5, 1956</td>
  <td role="cell">Paris</td>
  <td role="cell">3.4</td>
  <td role="cell">3451</td>
</tr>
<tr role="row">
  <td role="cell">Captain</td>
  <td role="cell">Cool</td>
  <td role="cell">Tree Crusher</td>
  <td role="cell">Blue</td>
  <td role="cell">Wars</td>
  <td role="cell">Steve 42nd</td>
  <td role="cell">December 13, 1982</td>
  <td role="cell">Las Vegas</td>
  <td role="cell">1.9</td>
  <td role="cell">Under the couch</td>
</tr>
</tbody>
</table>

移动响应表

1 个答案: