三列CSS滚动表的布局错误
[英]Wrong layout of CSS scroll table with three columns
问题描述
I'm building a table with three columns IDServizio, NomeServizio, Descrizione . 
我正在建立一个包含三列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. 我正在尝试使用css，使我可以使表格带有滚动条，但是我不知道布局如何更改。
I would like to modify the CSS or html code to show the contents of each line of the description column without wrap. 我想修改CSS或html代码以显示描述列每一行的内容而无需换行。
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. 我是html语言的初学者。
1 个解决方案
解决方案1
1 已采纳 2019-02-06 09:04:05
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.