Question

我到处寻找但找不到合适的答案。

如何设置html表的样式，但只能设置第一行。（如果可能的话，只有同一行的第一列）

但是现在是棘手的部分，我使用带有desc的foreach。所以我从数据库中检索数据，而不只是将数据放在我的表中。

以下是我的代码：

<table class="table sortable" id="voteResults" name="voteResults">
  <thead>
    <tr>
      <th>Keuze</th>
      <th>Aantal punten</th>
    </tr>
  </thead>

  @foreach($lists as $i => $list)
    <tbody>
      <tr>
        <td>{{ $list->option }}</td>
        <td>{{ $list->points }}</td>
      </tr>
    </tbody>
  @endforeach
</table>

但是我怎样才能设置第一列的样式？如果可能的话，给它一个图像或边框颜色。（基本上每个css

我已经更新了我的代码（$ i =＆gt;），有了这个，您可以轻松获得该列的第一个ID。只有下一个问题是，我不知道如何用if函数设置它的样式..（如果$ i === 1给background-color：red，例如）

Answer 1

您可以使用<div />将其打包，或者为其提供课程first：

<td class="first">{{ $list->option }}</td>

在CSS中：

.first {padding-left: 50px; background: url("50px-image.png") left top no-repeat;}

在纯PHP中，我会这样做：

  $first = true;
  @foreach($lists as $list)
    <tbody>
      <tr>
        <td{{ ($first) ? ' class="first"' : "" }}>{{ $list->option }}</td>
        <td>{{ $list->points }}</td>
        {{ $first = false }}
      </tr>
    </tbody>
  @endforeach

Answer 2

仅限CSS的解决方案：

.table tbody:nth-child(2) tr:first-child td:first-child {
  border: 1px solid #cc0000;
}

选择正文中的第一行，然后选择该行内的第一行。

https://developer.mozilla.org/en-US/docs/Web/CSS/%3Afirst-child

Html表样式第一行用foreach

2 个答案: