HTML solves the problem of invalid table width setting

HTML solves the problem of invalid table width setting

If you set the table-layer:fixed style for a table and find that a row in the table has been merged, the column widths of the other rows that have not been merged will be averaged and the column width setting will become invalid.

Solution:

Add before tbody

        <col style="width: 100px;"/>
        <col>
        <col style="width: 100px;"/>
        <col style="width: 100px;"/>
        <col style="width: 100px;"/>
.detail {
    padding-bottom: 50px;
    margin-top: 80px;
}

.detail_table {
    table-layout:fixed;/*The column width is set by the table width and column width. */
    margin: auto;/*table centered*/
    text-align: center;
    border: 1px solid #804040;
    border-collapse: collapse;
}

.detail_table th {
    padding: 26px;
}

.detail_table td {
    border: 1px solid #804040;
    padding-top: 16px;
    padding-bottom: 16px;
}

.special {
    text-align: left;
    padding-left: 20px;
}

<div class="detail">

    <table class="detail_table">

        <thead>
        <th colspan="5">Details of selected options</th>
        </thead>
        <!--If you write, it will follow the width you write, but if the width you write does not fill the table, it will be divided equally into each td according to the proportion of the size you give-->
        <!--Now the four columns are 100px, and the column without data takes up all the rest-->
        <col style="width: 100px;"/>
        <col>
        <col style="width: 100px;"/>
        <col style="width: 100px;"/>
        <col style="width: 100px;"/>

        <tbody>

        <tr>
            <td>
                Serial number
            <td>
                Symptoms
            <td>
                Conform to
            <td>
                Not compliant</td>
            <td>
                Unsure
        </tr>

        <?php $i = 1; ?>

        <?php foreach ($test as $item): ?>
            <!--Get the selection-->
            <?php $temp = $this->session->userdata('b' . $i) ?>

            <tr>

                <td>
                    <?php echo $i; ?>
                </td>

                <td>
                    <?php echo $item; ?>
                </td>

                <td>
                    <?php if ($temp == 1): ?>√<?php endif ?>
                </td>
                <td>
                    <?php if ($temp == 2): ?>√<?php endif ?>
                </td>

                <td>
                    <?php if ($temp == 3): ?>√<?php endif ?>
                </td>

            </tr>

            <?php $i++; ?>

        <?php endforeach; ?>

        </tbody>

    </table>

</div>

This is the end of this article about how to solve the problem of invalid table width settings in html. For more related content about invalid table width settings, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<:  Solve the problem that document.getElementBy series methods cannot obtain objects

>>:  Draw a heart with CSS3

Recommend

Two ways to clear table data in MySQL and their differences

There are two ways to delete data in MySQL: Trunc...

MySQL inspection script (must read)

As shown below: #!/usr/bin/env python3.5 import p...

React hooks introductory tutorial

State Hooks Examples: import { useState } from &#...

How to use lodop print control in Vue to achieve browser compatible printing

Preface This control will have a watermark at the...

Linux system repair mode (single user mode)

Table of contents Preface 1. Common bug fixes in ...

How to use shell to perform batch operations on multiple servers

Table of contents SSH protocol SSH Connection pro...

Vue implements a simple calculator

This article example shares the specific code of ...

Detailed explanation of the definition and function of delimiter in MySQL

When you first learn MySQL, you may not understan...

Practical method of deleting associated tables in MySQL

In the MySQL database, after tables are associate...

Should I use Bootstrap or jQuery Mobile for mobile web wap

Solving the problem Bootstrap is a CSS framework ...

Solution to the problem of MySQL deleting and inserting data very slowly

When a company developer executes an insert state...

How to install the latest version of docker using deepin apt command

Step 1: Add Ubuntu source Switch to root su root ...

Sample code for partitioning and formatting a disk larger than 20TB on centos6

1. Server environment configuration: 1. Check dis...