Question 229054 in Laravel Question posted in
The official Laravel Documentation can be found here.

Customize a list in Laravel

Laravel noob here. I just created a table in Laravel and now I want to customize it using CSS. How do I exactly do it? Here is the picture of the table (I want to change the padding, text color). LIST

I have tried changing it with HTML styles. but I have no idea how to edit CSS in Laravel.

Tags:

2

Answers


  1. 0

    Apply following Tailwind classe to style the tables.

    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>

<table class="w-full whitespace-nowrap">
  <thead>
    <tr>
      <th class="border px-6 py-4">Column 1</th>
      <th class="border px-6 py-4">Column 2</th>
      <th class="border px-6 py-4">Column 3</th>
    </tr>
  </thead>
   <tbody>
    <tr>
      <td class="border px-6 py-4">Data 1</td>
      <td class="border px-6 py-4">Data 2</td>
      <td class="border px-6 py-4">Data 3</td>
    </tr>
  </tbody>
</table>
    Login or Signup to reply.
  2. 0

    It is not about Laravel, it is about HTML and CSS and you have to learn these two first.

    You can apply some styles like this:

    <style>
    th, td {
        border: 1px solid #000;
        padding: 15px;
    }
</style>


<table>
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
</table>

    You can use some frameworks like bootstrap and Tailwind to do that easily.

    Use bootstrap :

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>

    You can see the full example in here.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search