0

I'm trying to create a table like this:

Expected Output

enter image description here

But the current output is just like this:

enter image description here

How can I make the table to be vertical and center. The current output is I can make the text vertical but the text is not center. How can I make just like the expected output?

Here's the code

<!-- HTML -->
<div class="row">
    <div class="col-lg-12 col-md-12 mt-4">
        @foreach ($steps as $step)
            <table class="full-width">
                <tbody>
                    <tr>
                        <td class="{{ $step['color'] }}-pure w-10-p text-white" rowspan="4">
                            <label class="vertical-text text-center">STEP {{ $step['id']}}</label>
                        </td>
                        <td class="{{ $step['color'] }}-light p-2">Resources</td>
                        <td class="{{ $step['color'] }}-light p-2">Notes</td>
                    </tr>
                    <tr>
                        <td class="white"></td>
                        <td class="white"></td>
                    </tr>
                    <tr>
                        <td class="white"></td>
                        <td class="white"></td>
                    </tr>
                    <tr>
                        <td class="white"></td>
                        <td class="white"></td>
                    </tr>
                </tbody>
            </table>
        @endforeach
    </div>
</div>


<!--CSS PART-->
.w-10-p {
    width: 10%;
}

.vertical-text {
    transform-origin: 0 0;
    transform: rotate(270deg);
}

.full-width {
    width: 100%;
}

JS FIDDLE SNIPPET:

Link: https://jsfiddle.net/bpkxaLth/

Community
  • 1
  • 1
Star
  • 161
  • 6
  • 15
  • You have tried `vertical-align: middle;` ? – Simone Rossaini Feb 26 '20 at 12:27
  • Share the full minimal code to reproduce. – Alexandre Elshobokshy Feb 26 '20 at 12:33
  • can you please share html code on snippet – Harshsetia Feb 26 '20 at 12:34
  • Ok. I'll try to upload in a snippet. Thanks guys – Star Feb 26 '20 at 12:35
  • No need for a complex transformation. You can set these for vertical text: `{writing-mode: tb-lr; writing-mode: vertical-lr; writing-mode: sideways-lr;`}. – Teemu Feb 26 '20 at 12:46
  • Here's the snippet. I don't know if it's because of bootstrap plugin? https://jsfiddle.net/bpkxaLth/ – Star Feb 26 '20 at 12:49
  • Like [so](https://jsfiddle.net/4ya8spwd/)? I modified the `vertical-text` and `full-width` classes, and added a selector for `full-width td`, you can find them from the css. – Teemu Feb 26 '20 at 12:54
  • Hi. Thanks @Teemu How can I rotate so that is it facing to the left side – Star Feb 26 '20 at 13:02
  • That maybe browser-dependent, in FF the vertical text in the fiddle shows exactly like in your image. – Teemu Feb 26 '20 at 13:04
  • @Teemu The output should be exactly the expected image which is facing to the left side, but on your image, it is facing on the right side – Star Feb 26 '20 at 13:06
  • 1
    Please re-read my comment above. Until [`sideways-*`](https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode) will be implemented in all browsers, you might have to use a transform. But you got the idea of how you can set the borders. – Teemu Feb 26 '20 at 13:09
  • @Teemu Hi. Thanks. I solved it by adding transform: rotate(180deg) – Star Feb 26 '20 at 13:09

1 Answers1

0

Try this 

<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
.tg .tg-0pky{border-color:inherit;text-align:left;vertical-align:top}
.tg .tg-0lax{text-align:left;vertical-align:top}
</style>
<table class="tg">
  <tr>
    <th class="tg-0pky" rowspan="2" style="transform: rotate(-90deg);text-alight:center;">Row1</th>
    <th class="tg-0pky">welcome</th>
    <th class="tg-0pky">welcome</th>
    <th class="tg-0pky">welcome</th>
  </tr>
  <tr>
    <td class="tg-0lax">welcome</td>
    <td class="tg-0lax">welcome</td>
    <td class="tg-0lax">welcome</td>
  </tr>
  <tr>
    <td class="tg-0pky" rowspan="2" style="transform: rotate(-90deg);">Row2</td>
    <td class="tg-0pky">welcome</td>
    <td class="tg-0pky">welcome</td>
    <td class="tg-0pky">welcome</td>
  </tr>
  <tr>
    <td class="tg-0lax">welcome</td>
    <td class="tg-0lax">welcome</td>
    <td class="tg-0lax">welcome</td>
  </tr>
</table>
Lakshmi
  • 85
  • 12