Wrong layout of CSS scroll table with three columns

Question

I'm building a table with three columns IDServizio, NomeServizio, Descrizione.

I'm trying to use a css that allows me to have the table with the scroll but I don't know how the layout is changed.

I would like to modify the CSS or html code to show the contents of each line of the description column without wrap.

Example (what I want) first row:

1        SearchCostruttore             Servizio che serve per ottenere la descrizione...

Now:

1        SearchCostruttore             Servizio che serve per ottenre  
                                       la descrizione relativa al costr

    <style type="text/css">
      table.scroll {
        width: 100%;
        border-spacing: 0;
        border: 2px solid black;
        /*text-align: center;*/
      }

      table.scroll th,
      table.scroll td,
      table.scroll tr,
      table.scroll thead,
      table.scroll tbody {
        display: block;
      }

      table.scroll thead tr {
        /* fallback */
        width: 97%;
        /* minus scroll bar width */
        width: -webkit-calc(100% - 16px);
        width: -moz-calc(100% - 16px);
        width: calc(100% - 16px);
      }

      table.scroll tr:after {
        content: ' ';
        display: block;
        visibility: hidden;
        clear: both;
      }

      table.scroll tbody {
        height: 100px;
        overflow-y: auto;
        overflow-x: hidden;
      }

      table.scroll tbody td,
      table.scroll thead th {
        width: 19%;
        float: left;
        border-right: 1px solid black;
      }

      thead tr th {
        height: 30px;
        line-height: 30px;
        /*text-align: left;*/
      }

      tbody {
        border-top: 2px solid black;
      }

      tbody td:last-child,
      thead th:last-child {
        border-right: none !important;
      }

  
  <body>
    <form>
      <table class="scroll">
        <thead>
          <tr>
            <th>ID Servizio</th>
            <th>Nome Servizio</th>
            <th>Descrizione</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>searchCostruttore</td>
            <td>servizio che serve per ottenere il costruttore tramite sigcos e dessig</td>
          </tr>
          <tr>
            <td>2</td>
            <td>searchStructureAgent</td>
            <td>servizio che serve per ottenere la struttura dell'agente tramite codice e descrizione</td>
          </tr>
          <tr>
            <td>3</td>
            <td>getStructureAgent</td>
            <td>servizio che serve per ottenere la struttura dell'agente tramite il codice</td>
          </tr>
        </tbody>
      </table>

I try to modify the code but I didn't succeed.

I am a beginner with the html language.

why are you lots of css add in to your page

Mohammad Malek
– Mohammad Malek

2019-02-06 09:05:52 +00:00
Commented Feb 6, 2019 at 9:05 — Mohammad Malek
– Mohammad Malek, Commented Feb 6, 2019 at 9:05

Mohammad Malek · Accepted Answer · 2019-02-06 09:16:39Z

2

simple way to create table

table, th, td {
    border-collapse: collapse;
  border: 1px solid black;
}

<table style="width:100%">
  <tr>
    <th style="background:gray;">ID Servizio</th>
<th style="background:yellow;">Nome Servizio</th>
<th style="background:green;">Descrizione</th>
  </tr>
  <tr>
     <td>1</td>
	<td>searchCostruttore</td>
	<td>servizio che serve per ottenere il costruttore tramite sigcos e dessig</td>
  </tr>
  <tr>
    <td>2</td>
                <td>searchStructureAgent</td>
                <td>servizio che serve per ottenere la struttura dell'agente tramite codice e descrizione</td>
  </tr>
  <tr>
     <td>3</td>
                <td>getStructureAgent</td>
                <td>servizio che serve per ottenere la struttura dell'agente tramite il codice</td>
  </tr>
</table>

edited Feb 6, 2019 at 9:16

answered Feb 6, 2019 at 9:04

Mohammad Malek

6441 gold badge7 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Antonio Sprezzi Over a year ago

Thanks!! I wanted to try to implement the css but in this case it wasn't needed

Antonio Sprezzi Over a year ago

excuse another question .. how do I color the columns of the table header?

Mohammad Malek Over a year ago

you can set color as you choice check my last edited answer

Mohammad Malek Over a year ago

happy to help my bro

Antonio Sprezzi Over a year ago

can you remove the inside edge at each row?

|

Collectives™ on Stack Overflow

Wrong layout of CSS scroll table with three columns

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related