How to make table grid responsive without using flexbox etc [duplicate]-CodePudding

I have really simple HTML structure, like this:

<table>
    <tr>
        <td><div class="item"><div>0</div></div></td>
        <td><div class="item"><div>1</div></div></td>
        <td><div class="item"><div>2</div></div></td>
        <td><div class="item"><div>3</div></div></td>
        <td><div class="item"><div>4</div></div></td>
        <td><div class="item"><div>5</div></div></td>
        <td><div class="item"><div>6</div></div></td>
        <td><div class="item"><div>7</div></div></td>
        <td><div class="item"><div>8</div></div></td>
        <td><div class="item"><div>9</div></div></td>
        <td><div class="item"><div>10</div></div></td>
    </tr>
</table>

The situation look like, I am making email template so I can't use any flexbox, grid methods. I am super new with styling in old way :). So what i want? I just want to style table like display: flex' but again I can't use flex or grid... I want items to be in one line, same gap between each one justify-content: space-around` And also they should be responsive. So what i think, I need to set width and height of items in % or vw values?

CodePudding user response：

Define the table width as 100% and center-align the text(s) in the table cells:

table {
  width: 100%;
}
td {
  text-align: center;
}

<table>
    <tr>
        <td><div class="item"><div>0</div></div></td>
        <td><div class="item"><div>1</div></div></td>
        <td><div class="item"><div>2</div></div></td>
        <td><div class="item"><div>3</div></div></td>
        <td><div class="item"><div>4</div></div></td>
        <td><div class="item"><div>5</div></div></td>
        <td><div class="item"><div>6</div></div></td>
        <td><div class="item"><div>7</div></div></td>
        <td><div class="item"><div>8</div></div></td>
        <td><div class="item"><div>9</div></div></td>
        <td><div class="item"><div>10</div></div></td>
    </tr>
</table>

CodePudding user response：

Assuming I haven't misunderstood the questions, if there are 10 cells then you could give them each 10% of the available space.

Of course, if you start to introduce margins or padding or borders the proportion will be different, so this is just the simplest case.

<table style="width: 100%;">
    <tr style="width: 100%;">
        <td style="width: 10%;"><div class="item"><div>0</div></div></td>
        <td style="width: 10%;"><div class="item"><div>1</div></div></td>
        <td style="width: 10%;"><div class="item"><div>2</div></div></td>
        <td style="width: 10%;"><div class="item"><div>3</div></div></td>
        <td style="width: 10%;"><div class="item"><div>4</div></div></td>
        <td style="width: 10%;"><div class="item"><div>5</div></div></td>
        <td style="width: 10%;"><div class="item"><div>6</div></div></td>
        <td style="width: 10%;"><div class="item"><div>7</div></div></td>
        <td style="width: 10%;"><div class="item"><div>8</div></div></td>
        <td style="width: 10%;"><div class="item"><div>9</div></div></td>
        <td style="width: 10%;"><div class="item"><div>10</div></div></td>
    </tr>
</table>

CodePudding user response：

It may also be possible that you can fix your issues with some CSS formating in the

header and some tags in your table structure.

    <head>
          <meta charset="utf-8" />
          <title></title>
          <style>
            .grid-container {
                display: grid;
                grid-row-gap: 2px;
                grid-template-columns: auto auto auto auto auto auto;
                background-color: #2196F3;
                padding: 5px;
            }
    
            .grid-item {
                background-color: rgba(255, 255, 255, 0.8);
                border: 1px solid rgba(0, 0, 0, 0.8);
                padding: 5px;
                font-size: 30px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <body>
                // Class "buttons" references section in Header
            <div class="grid-container">
                <div class="grid-item"><button class="buttons"> 01</button></div>
            </div>
        </body>
    </html>