Question

我正在建立一个包含三列IDServizio, NomeServizio, Descrizione的表。

我正在尝试使用css，该css使我可以使表格带有滚动条，但是我不知道布局如何更改。

我想修改CSS或html代码以显示描述列每一行的内容而无需换行。

示例（我想要的）第一行：

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

现在：

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>

我尝试修改代码，但没有成功。

我是使用html语言的初学者。

Answer 1

创建表的简单方法

Query firebaseSearchQuery = mUserDatabase.orderByChild("fname").equals(searchText);

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

三列CSS滚动表的布局错误

1 个答案: