Member 13926859 Ответов: 1

Как я могу сделать отзывчивую таблицу с 13-й


я хочу сделать отзывчивую таблицу, которая работает в телефоне, и я не знаю, как это сделать
в таблице есть 13-е место

Что я уже пробовал:

<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>

Richard MacCutchan

Изучите программирование iPhone.

ZurdoDev

Bootstrap-это все о 12 столбцах, так что, возможно, у вас есть внешний div с 12 столбцами, а затем внутренний div, где первые 11 столбцов совпадают, но тогда ваши 12-й и 13-й столбцы будут находиться в 12-м столбце внешнего.

Не уверен, просто нужно что-то попробовать.

1 Ответов

Рейтинг:
9

Andre Oosthuizen

Вы можете добавить в свой css-файл следующее:. panel-это имя контейнера div. Например, вам может потребоваться немного изменить его в соответствии с вашими потребностями. -

@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;
		}
}