Как отформатировать отдельные <td>столбцы в пример - PullRequest
Новая
       4

Как отформатировать отдельные <td>столбцы в пример

1 голос
/ 01 апреля 2020

Я начинаю возиться с C#. Это мой первый проект на низовом уровне.

Я проработал пример MVC в течение недели и преодолел большинство своих проблем в обучении. Что я не могу понять, так это применить стратегию форматирования CSS к данным, возвращаемым из вызова БД (кроме как писать очень беспорядочную спецификацию вызова c HTML).

Я собираюсь использовать образец с w3schools.com (https://www.w3schools.com/css/tryit.asp?filename=trycss_table_border_divider) в качестве образца, потому что он хорошо содержится.

Используя этот пример, я хочу иметь возможность выравнивания по левому краю первый столбец, центрируйте второй столбец и выровняйте по правому краю с помощью # ##0.00, отформатируйте столбец значений.

Я предполагаю, что в этом коде нужно что-то сделать, чтобы различать guish между Столбцы 1, 2 и 3 (но не могу найти, что это): 

th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

Полный список кода с w3schools.com выглядит следующим образом: 

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}
</style>
</head>
<body>

<h2>Bordered Table Dividers</h2>
<p>Add the border-bottom property to th and td for horizontal dividers:</p>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  <th>Savings</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Brown</td>
    <td>$250</td>
  </tr>
</table>

</body>
</html>

Этот учебник, над которым я работаю, является следующим, но я решил, что я мог в этом примере (так что его, вероятно, следует игнорировать) https://docs.microsoft.com/en-us/aspnet/core/tutorials/first-mvc-app/adding-model?view=aspnetcore-3.1&tabs=visual-studio-mac

1 Ответ

0 голосов
/ 02 апреля 2020

Я добавил демонстрацию CSS, чтобы показать, как решить эту проблему со ссылками. Нажмите на кнопку «Выполнить», чтобы увидеть ее в действии.

Хотя вы можете добавить классы к каждому тегу <td>, проще указать, какой дочерний элемент из tr вы хотите. Для этого вы можете использовать псевдоклассы first-child, nth-child и last-child. Я добавил к вашему примеру случайное форматирование - я оставлю вам конкретные определения форматирования c.

Вы, конечно, можете использовать nth-child для всех них. Часто перечисления в программировании начинаются с нуля («с нулевым индексом»), но этот класс с одним индексом. Таким образом, для first-child я мог бы вместо этого использовать nth-child(1). Аналогичным образом, last-child можно записать здесь как nth-child(3), но в некоторых случаях это может быть менее ремонтопригодным, поскольку, если вы хотите вставить столбец, вам придется также настроить CSS для самого правого столбца. . 

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

table tr td:first-child {
    font-weight: bold;
    color: red;
}
table tr td:nth-child(2) {
    font-size: 0.8em;
    color: purple;
}
table tr td:last-child {
    font-style: italic;
    color: green;
}
</style>
</head>
<body>

<h2>Bordered Table Dividers</h2>
<p>Add the border-bottom property to th and td for horizontal dividers:</p>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  <th>Savings</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Brown</td>
    <td>$250</td>
  </tr>
</table>

</body>
</html>

Дополнительная литература

Используемые классы:

Все эти псевдо- классы, которые имеют особое значение. Вы можете узнать больше об этом здесь:

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...