Click here to Skip to main content
14,600,948 members
Rate this:
Please Sign up or sign in to vote.
See more: , +
i want to do a responsive table that works in phone and i don t know how to do it
the table has 13 th

What I have tried:

<div class="row">
    <div class="col-md-6">
        <button routerLink="/addclient" type="button" class="btn btn-danger
            mr-4 mb-3
            mb-sm-0"> Nouveau
            Client Pro</button>


        <div class="task-search d-inline-block mb-3 mb-sm-0
            mr-sm-3">
            <form>
                <div class="input-group">
                    <input type="text" class="form-control search-input"
                        placeholder="Search..." />
                    <span class="uil uil-search icon-search"></span>
                    <div class="input-group-append">
                        <button class="btn btn-soft-primary" type="button">
                            
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>


</div>
<br>

<div class="card">
    <div class="card-body">

        <div class="container">
            <br />
            <h3 class="card-title">Liste des clients Professionelle</h3>


        </div>


        <table class="table table-striped">
            <thead>
                <tr>
                    <th>Entreprise</th>
                    <th>Adresse</th>
                    <th>Tel</th>
                    <th>Ville</th>
                    <th>Site Web</th>
                    <th>Cecteur d'activite</th>
                    <th>RC</th>
                    <th>TP</th>
                    <th>ICE</th>
                    <th>Email</th>
                    <th>Mot de passe</th>
                    <th></th>
                </tr>

            </thead>
            <tbody>
                <tr>
                    <td>jj</td>
                    <td>pojrvnb</td>
                    <td>pojrvnb</td>
                    <td>pojrvnb</td>
                    <td>pojrvnb</td>
                    <td>pojrvnb</td>
                    <td>pojrvnb</td>
                    <td>pojrvnb</td>
                    <td>pojrvnb</td>
                    <td>pojrvnb</td>
                    <td>pojrvnb</td>


                    <td class="text-right">

                        <a href="" class="btn btn-info">
                            
                        </a>

                        <a href="" class="btn btn-warning">
                            
                        </a>

                    </td>
                </tr>

            </tbody>
        </table>


    </div>
</div>
Posted
Updated 30-Jun-20 21:21pm
Comments
Richard MacCutchan 30-Jun-20 15:46pm
   
Study iPhone programming.
ZurdoDev 30-Jun-20 16:41pm
   
Bootstrap is all about 12 columns so maybe you have an outer div with 12 columns and then an inner div where the first 11 columns match up but then your 12th and 13th columns will be in the 12 column of the outer.

Not sure, just something to try.

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 1

You can add the following to your css file, .panel is the div container name. Used as an example, you might need to modify a little to suit your needs. -

@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
	table.fixedHeader-floating {
		display: none
	}
	
	.panel h2 {
		font-size: 12px;
		font-weight: 300;
	}
	
	/* Force table to not be like tables anymore */
	.panel thead, tbody, th, td, tr {
		display: block;
	}

	/* Hide table headers (but not display: none;, for accessibility) */
	.panel thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	.panel tr {
		border: 1px solid #ff6a00;
	}

	.panel td {
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #ff6a00;
		position: relative;
		padding-left: 1%;
	}

		.panel td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 6px;
			left: 6px;
			width: 98%;
			padding-right: 10px;
			white-space: nowrap;
		}
}
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100