Мобильные адаптивные таблицы

Question

Я создал веб-приложение и в настоящее время делаю страницы мобильными.Конкретно я имею дело с таблицами.Я нашел описание, объясняющее, как заставить стол переключаться с горизонтального на вертикальный для планшетов и телефонов с меньшим экраном.Это прекрасно работает, но на странице есть 3 таблицы, и я не уверен, как адаптировать CSS для 3 разных таблиц.

Описание: 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 = ”One”;ID = «Два»;id = ”Three”, а затем нацелен на идентификатор td?

Я попытался добавить 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 будет иметь ячейки с первой по девятую, таблица 2 будет иметь ячейки с десяти по девятнадцать, а в таблице три будут ячейки с двадцати по двадцать восемь.

Возможно, вместо этого я мог бы добавить метку в основную ячейку 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>