2

I'm trying to compose a table in HTML; I found code to make the first line of the table in vertical text, but I have problems with the padding, or width, of columns.

I want them to be as wide as necessary for the second line (there will be more lines, but just for example), but it seems to have unnecessary padding. I tried with the column-width property in CSS, and with col width in my tpl (after I define table), but nothing works.

I want the column to be as wide as its longest input (in first and last column there will be words, in others will be numbers from 1 to 5). How can I do that?

And another thing: why does not first line align left, if I change text-align attribute in style to left?

This is what I have now and what I want to achieve:

<!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">

    <style> 
    .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;
    }
    </style>

 </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>
Tigerjz32
  • 4,324
  • 4
  • 26
  • 34
MocS
  • 37
  • 7

3 Answers3

0

The Thing you are looking to can be done but you have to align the line according to the longest word while if you talk about the left alignment you can do it the error is in this line

        white-space:nowrap;

This line don't allow him to go to left hand side ... while if you can describe the main aim it would be helpful...

  • Thank you. I added a picture, hope it shows what I want to achieve. – MocS Sep 22 '18 at 16:45
  • @MocS try using developer options and editing the styles yourselves as you want to learn it.. –  Sep 22 '18 at 16:50
0

If you want to rotate the text of the columns, just use CSS Style Rotate. Reference

$(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>
Hary
  • 5,690
  • 7
  • 42
  • 79
0

try below code

    .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>
Shiv Kumar Baghel
  • 2,464
  • 6
  • 18
  • 34