Изменения строка таблицы макет с помощью CSS

Я получил столИзменения строка таблицы макет с помощью CSS

<table> 
    <thead> 
    <th>Column1</th> 
    <th>Column2</th> 
    <th>Column3</th> 
    </thead> 
    <tbody> 
    <tr> 
     <td>Cell A1</td> 
     <td>Cell A2</td> 
     <td>Cell A3</td> 
    </tr> 
    <tr> 
     <td>Cell B1</td> 
     <td>Cell B2</td> 
     <td>Cell B3</td> 
    </tr> 
    </tbody> 
</table>

Что мне нужно сделать, это отобразить всей таблицы как одного столбца с помощью CSS

Выхода должно быть:

+---------+ 
| Cell A1 | 
+---------+ 
| Cell A2 | 
+---------+ 
| Cell A3 | 
+---------+ 
| Cell B1 | 
+---------+ 
| Cell B2 | 
+---------+ 
| Cell B3 | 
+---------+

Причина этого в том, что каждая ячейка таблицы очень широка, и таблица создается CouchCMS на панели администратора.

источник

2015-06-25 Helga Iliashenko

Просто добавьте немного CSS для отображения в качестве block каждый элемент в таблице, и скрыть ваш thead:

table, tr, td { 
    display: block; 
} 
thead { 
    display: none; 
}

JSFIDDLE: http://jsfiddle.net/ghorg12110/k8pojm31/

источник

2015-06-25 11:09:02

Попробуйте этот набор правил CSS

table { 
 
    border: 1px solid #ccc; 
 
    border-collapse: collapse; 
 
} 
 
tbody, 
 
thead,tr { 
 
    display: block; 
 
} 
 
th, 
 
td { 
 
    padding: 4px; 
 
    display: block; 
 
}

<table border="1"> 
 
    <thead> 
 
    <th>Column1</th> 
 
    <th>Column2</th> 
 
    <th>Column3</th> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>Cell A1</td> 
 
     <td>Cell A2</td> 
 
     <td>Cell A3</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Cell B1</td> 
 
     <td>Cell B2</td> 
 
     <td>Cell B3</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

источник

2015-06-25 11:13:06 Suresh

Если вы хотите отобразить один столбец, то не использовать несколько, используйте один тег, если вы хотите заголовок столбца, но если не хотите заголовок столбца, а затем попробовать этот код:

<html> 
 
<head> 
 
<style> 
 
span{ 
 
color:#019ac8; 
 

 
} 
 
table{ 
 
border:1px dotted #000; 
 
} 
 

 
</style> 
 

 
</head> 
 
<body> 
 
<table> 
 

 
    <tbody> 
 
    <tr> 
 
     <td><span>Cell</span> A1</td></tr> 
 
     <tr><td><span>Cell</span> A2</td></tr> 
 
     <tr><td><span>Cell</span> A3</td> 
 
    </tr> 
 
    <tr> 
 
     <td><span>Cell</span> B1</td></tr> 
 
     <tr><td><span>Cell</span> B2</td></tr> 
 
    </tr> <td><span>Cell</span> B3</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
</body> 
 
</html>

введите код

источник

2015-06-25 11:26:49

Изменения строка таблицы макет с помощью CSS

ответ

Смежные вопросы