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

Implementation code for adding links to FLASH through HTML (div layer)

Today a client wants to run an advertisement, and ...

How to use Linux tr command

01. Command Overview The tr command can replace, ...

Detailed explanation of using Docker to build externally accessible MySQL

Install MySQL 8.0 docker run -p 63306:3306 -e MYS...

Realization of real-time file synchronization between Linux servers

Usage scenarios For existing servers A and B, if ...

Whitespace processing in HTML/CSS and how to preserve whitespace in the page

Whitespace rules in HTML In HTML, multiple spaces...

Detailed explanation of html printing related operations and implementation

The principle is to call the window.print() metho...

js to achieve 3D carousel effect

This article shares the specific code for impleme...

A simple way to call desktop exe programs on a web page

This article mainly introduces how to call desktop...

MySQL trigger definition and usage simple example

This article describes the definition and usage o...

Detailed explanation of Vue's ref attribute

Summarize This article ends here. I hope it can b...

How to hide a certain text in HTML?

Text hiding code, hide a certain text in HTML Copy...

Detailed explanation of Socket (TCP) bind from Linux source code

Table of contents 1. A simplest server-side examp...