Как установить ширину для вертикальных столбцов HTML? - PullRequest
Новая
       0

Как установить ширину для вертикальных столбцов HTML?

0 голосов
/ 22 сентября 2018

Я пытаюсь составить таблицу в HTML;Я нашел код для создания первой строки таблицы в вертикальном тексте, но у меня проблемы с заполнением или шириной столбцов.

Я хочу, чтобы они были настолько широкими, насколько это необходимо для второй строки (тамбудет больше строк, но только для примера), но, кажется, есть ненужные отступы.Я попытался использовать свойство column-width в CSS и col col в моем tpl (после определения таблицы), но ничего не работает.

Я хочу, чтобы столбец был таким же широким, как его самый длинный ввод (в первоми в последнем столбце будут слова, в других - цифры от 1 до 5).Как я могу это сделать?

И еще: почему первая строка не выравнивается по левому краю, если я изменяю атрибут text-align в стиле по левому краю?

Вот что я имею сейчас и чего хочу достичь:

image

<!doctype html>
  .verticalTableHeader {text-align: center;бело-пространство: Nowrap;трансформация происхождения: 50% 50%;преобразовать: повернуть (-90 градусов);} .verticalTableHeader: before {content: '';padding-top: 110%; / * принимает ширину в качестве эталона, + 10% для подделки некоторых дополнительных отступов * / display: inline-block;вертикально-Align: средний;}   
 Порода Вариант 1 Вариант 2 Вариант 3 Вариант 4 Вариант 5 Вариант 6 Вариант 7 Вариант 8 Вариант 9 Вариант 10 Вариант 11 Вариант 12 Вариант 13 Вариант 14 Вариант 15 Вариант 16 Вариант 17 Вариант 18 Вариант 19 Вариант 20 Вариант 21 Вариант 22 * ​​1044 *   Американский питбуль  3  3  3  3  3  3  3  3  3  3  3  3 3  3  3  3  3  3  3  3  26  Охотничьи собаки

Ответы [ 3 ]

0 голосов
/ 22 сентября 2018

Если вы хотите повернуть текст столбцов, просто используйте CSS Style Rotate. Ссылка 

$(document).ready(function() {
 $('.rotate').each(function()
  {
    $(this).css('height', $(this).css('width'));
  });
 
});
.rotate {
  /* FF3.5+ */
  -moz-transform: rotate(-90.0deg);
  /* Opera 10.5 */
  -o-transform: rotate(-90.0deg);
  /* Saf3.1+, Chrome */
  -webkit-transform: rotate(-90.0deg);
  /* IE6,IE7 */
  filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=0.083);
  /* IE8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)";
  /* Standard */
  transform: rotate(-90.0deg);
  position: relative;
  left: 50%;
  top: 50%;
}

table td, table th
{
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tr>
<th><div class="rotate">Breed</div></th>
<th><div class="rotate">Option1</div></th>
<th><div class="rotate">Option2</div></th>
</tr>
<tr>
<td>American pitbull</td>
<td>3</td>
<td>3</td>
</tr>
</table>
0 голосов
/ 22 сентября 2018

попробуйте ниже код 

    .verticalTableHeader {
        text-align:center;
        white-space:nowrap;
        transform-origin:50% 50%;
        transform: rotate(-90deg);
    }
    .verticalTableHeader:before {
        content:'';
        padding-top:110%;/* takes width as reference, + 10% for faking some extra padding */
        display:inline-block;
        vertical-align:middle;
    }
    
td {
   width: 30%;
   text-align: center;
}

td:first-child, td:last-child {  
   white-space:nowrap;
}
<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    </head>
 <body>


    <br>
    <center>
    <table border="1">
        <tr>
            <th class="verticalTableHeader">Breed</th>
            <th class="verticalTableHeader">Option 1</th>
            <th class="verticalTableHeader">Option 2</th>
            <th class="verticalTableHeader">Option 3</th>
            <th class="verticalTableHeader">Option 4</th>
            <th class="verticalTableHeader">Option 5</th>
            <th class="verticalTableHeader">Option 6</th>
            <th class="verticalTableHeader">Option 7</th>
            <th class="verticalTableHeader">Option 8</th>
            <th class="verticalTableHeader">Option 9</th>
            <th class="verticalTableHeader">Option 10</th>
            <th class="verticalTableHeader">Option 11</th>
            <th class="verticalTableHeader">Option 12</th>
            <th class="verticalTableHeader">Option 13</th>
            <th class="verticalTableHeader">Option 14</th>
            <th class="verticalTableHeader">Option 15</th>
            <th class="verticalTableHeader">Option 16</th>
            <th class="verticalTableHeader">Option 17</th>
            <th class="verticalTableHeader">Option 18</th>
            <th class="verticalTableHeader">Option 19</th>
            <th class="verticalTableHeader">Option 20</th>
            <th class="verticalTableHeader">Option 21</th>
            <th class="verticalTableHeader">Option 22</th>
        </tr>
        <tr>
            <td>American pitbull</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>26</td>
            <td>Hunting dogs</td>
        </tr>
    </table>
    </center>


<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
  </body>
</html>
0 голосов
/ 22 сентября 2018

Вещь, которую вы ищете, может быть выполнена, но вы должны выровнять линию в соответствии с самым длинным словом, а если вы говорите о выравнивании по левому краю, вы можете сделать это, ошибка в этой строке 

        white-space:nowrap;

Эта строка не позволяет ему перейти на левую сторону ... в то время как если бы вы могли описать основную цель, это было бы полезно ...

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...