0
Я пытаюсь построить таблицу, имеющую вертикальные заголовки, следуя этим сайтом: http://codepen.io/chriscoyier/pen/FapifBootstrap CSS не совместим с моим кодом
Я также использовать загрузочный CSS.
Этот вопрос самозагрузки CSS не совместимы с предыдущим примером: https://jsfiddle.net/arj0k0j8/
мой код:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>
Newsletter generator v2
</title>
<style>
.table-header-rotated {
border-collapse: collapse;
}
.table-header-rotated td {
width: 30px;
}
.table-header-rotated th {
padding: 5px 10px;
}
.table-header-rotated td {
text-align: center;
padding: 10px 5px;
border: 1px solid #ccc;
}
.table-header-rotated th.rotate {
height: 140px;
white-space: nowrap;
}
.table-header-rotated th.rotate > div {
-webkit-transform: translate(25px, 51px) rotate(315deg);
-ms-transform: translate(25px, 51px) rotate(315deg);
transform: translate(25px, 51px) rotate(315deg);
width: 30px;
}
.table-header-rotated th.rotate > div > span {
border-bottom: 1px solid #ccc;
padding: 5px 10px;
}
.table-header-rotated th.row-header {
padding: 0 10px;
border-bottom: 1px solid #ccc;
}
</style>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
</head>
<body>
<div class="container" id="container">
<table class="table table-header-rotated">
<thead>
<tr>
<!-- First column header is not rotated -->
<th></th>
<!-- Following headers are rotated -->
<th class="rotate"><div><span>Column header 1</span></div></th>
<th class="rotate"><div><span>Column header 2</span></div></th>
<th class="rotate"><div><span>Column header 3</span></div></th>
<th class="rotate"><div><span>Column header 4</span></div></th>
<th class="rotate"><div><span>Column header 5</span></div></th>
<th class="rotate"><div><span>Column header 6</span></div></th>
</tr>
</thead>
<tbody>
<tr>
<th class="row-header">Row header 1</th>
<td><input checked="checked" name="column1[]" type="radio" value="row1-column1"></td>
<td><input checked="checked" name="column2[]" type="radio" value="row1-column2"></td>
<td><input name="column3[]" type="radio" value="row1-column3"></td>
<td><input name="column4[]" type="radio" value="row1-column4"></td>
<td><input name="column5[]" type="radio" value="row1-column5"></td>
<td><input name="column6[]" type="radio" value="row1-column6"></td>
</tr>
<tr>
<th class="row-header">Row header 2</th>
<td><input name="column1[]" type="radio" value="row2-column1"></td>
<td><input name="column2[]" type="radio" value="row2-column2"></td>
<td><input checked="checked" name="column3[]" type="radio" value="row2-column3"></td>
<td><input checked="checked" name="column4[]" type="radio" value="row2-column4"></td>
<td><input name="column5[]" type="radio" value="row2-column5"></td>
<td><input name="column6[]" type="radio" value="row2-column6"></td>
</tr>
<tr>
<th class="row-header">Row header 3</th>
<td><input name="column1[]" type="radio" value="row3-column1"></td>
<td><input name="column2[]" type="radio" value="row3-column2"></td>
<td><input name="column3[]" type="radio" value="row3-column3"></td>
<td><input name="column4[]" type="radio" value="row3-column4"></td>
<td><input checked="checked" name="column5[]" type="radio" value="row3-column5"></td>
<td><input checked="checked" name="column6[]" type="radio" value="row3-column6"></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
когда Я удаляю эту строку:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
всё хорошо работает
Вы должны будете использовать ваши веб-консоль отладки, чтобы попытаться найти элементы, которые не отображаются должным образом, а затем отследить, какой стиль правила вызывают конфликт, а затем работают оттуда –