1
ブラウザのサイズを変更するときに、2つの列が位置を切り替える特定のテーブルがあります。ブラウザのサイズ変更時のHTMLテーブルセルの切り替え位置
これは、(フィールド "ID Vendedor" と "ノンブル" に注意)通常はどのように見えるかです:
をそして、これはサイズを変更する場合、それがどのように見えるかです:
しかし、これはこの特定のテーブルでのみ発生し、他のテーブルは必要に応じて動作します。
これは、テーブルのHTMLとCSSです:
@media (max-width: 768px) {
table.resp-table {
border: 0;
}
table.resp-table thead {
display: none;
}
table.resp-table tr {
border-top: 2px solid #222;
margin-bottom: 10px;
display: block;
}
table.resp-table td {
display: block;
text-align: right;
font-size: 13px;
position: static;
}
table.resp-table td:last-child {
border-bottom: 0;
}
table.resp-table td:before {
content: attr(data-label);
float: left;
text-transform: uppercase;
font-weight: bold;
}
}
<div class="col-xs-12 pt-60-on-xs" ng-hide="addingVendedor || editingVendedor">
<p class="lead text-warning text-center" ng-if="!vendedores.length">No hay Vendedores en Base de Datos</p>
<table class="table resp-table" ng-if="vendedores.length">
<thead>
<tr>
<th>ID Vendedor</th>
<th>Nombre</th>
<th>Distribuidor</th>
<th>Cargo</th>
<th>Código</th>
<th>Fecha Registro</th>
<th>Editar/Borrar</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="vendedor in vendedores | filter:filter.vendedor">
<td data-label="Nombre">{{vendedor.id_vendedor}}</td>
<td data-label="ID Vendedor">{{vendedor.nombre}}</td>
<td data-label="Distribuidor"><span>{{vendedor.distribuidor.nombre}}</span> <strong>({{vendedor.distribuidor.id_distribuidor}})</strong>
</td>
<td data-label="Cargo">{{vendedor.cargo}}</td>
<td data-label="Código">{{vendedor.codigo || "N/A"}}</td>
<td data-label="Fecha Registro">{{vendedor.createdAt | date:'dd/MM/yy hh:mm:ss a'}}</td>
<td data-label="Editar/Borrar">
<button class="btn btn-warning" ng-click="setEditVendedor(vendedor)"><span class="glyphicon glyphicon-pencil"></span>
</button>
<button class="btn btn-danger" ng-click="deleteVendedor(vendedor)"><span class="glyphicon glyphicon-remove"></span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
私はこの解決策を探すために試してみましたが、私は何も見つかっていません。この問題を解決するには、少なくとも私が正しい方向に向けることができれば幸いです。
あなたの「」には子がありません。「」。 –
connexo
A
2
+1
答えて
モバイルビューに切り替えると、要素の
data-label
属性の内容を検索する疑似要素を使用して見出しが生成されます。特にCSSのこのブロック:問題は
data-label
属性は、HTMLでの間違った方法ラウンドしているの周りにそれらを交換し、見出しが正しいだろうです:は次のようになります。
出典
2016-12-03 19:16:48
あなたの ''には子ども ' 'がありません。 –
connexo
+0
+0
関連する問題
-
1. 位置固定ブラウザのサイズ変更
-
2. Htmlテーブルセルのサイズ変更の効果
-
3. ブラウザの絶対位置から浮動小数点への切り替え
-
4. ウィンドウのCSS表示をサイズ変更して切り替える
-
5. HTML/CSSの位置付け〜スクリーンサイズ/解像度とブラウザのサイズ変更
-
6. raphael.jsのオブジェクトの位置決め基準の切り替え
-
7. 遅延切り替えビューの変更
-
8. ブラウザのタブの切り替え時間の差
-
9. 右揃えテーブルセルのdivの位置
-
10. JAVAFXでTableviewのセル位置を切り替える
-
11. レスポンシブなレイアウト:スマートフォンレイアウトの位置を切り替える方法
-
12. ブラウザ/ウィンドウのサイズ変更時のJQuery/Javascriptの自動サイズ変更
-
13. HTML CSSのスライドショーの切り替え
-
14. NSViewフレームのサイズ変更時のロック位置
-
15. ウィンドウのサイズを変更するとHTMLの位置が変更されます
-
16. jQueryを使用してブラウザの幅(サイズ変更)に基づいてcilckクラスを切り替えます
-
17. 起動方法ブラウザのサイズを変更するときに1024pxからナビゲーションバーを切り替える
-
18. StringIndexOutOfBoundsExceptionページ切り替え時
-
19. htmlとphpの切り替え
-
20. htmlクリックイベントでの切り替え機能
-
21. aureliaはサイズ変更時の位置を取得
-
22. RecyclerView:位置を取得してアクティビティに切り替える
-
23. divを計算位置に切り替えます
-
24. ブラウザの最大化とタブの切り替え時に、メディアクエリでCSSが変更されない
-
25. トグル切り替え時のアラート
-
26. NullPointerExceptionビュー間の切り替え時
-
27. animation:切り替え時の遷移
-
28. Winforms TreeViewコントロールのTreeNodeのStateImageとIndexImageの位置の切り替え
-
29. テーブルセルの自動サイズ変更の解除
-
30. TableViewCellのUISwitch - 切り替え時にセルのテキストを変更する
最新の質問
-
1. C#oneway要素のバインディングの更新時にフォーカスが失われました
-
2. PassengerDetailsRQを呼び出すときにERR.SWS.CLIENT.VALIDATION_FAILED例外が発生し続ける
-
3. NoMethodError in Registrations#new
-
4. 結果が続くリンクのみを検索
-
5. JPEGコーデックの情報がないJPEGファイルのサイズはどれくらいですか?
-
6. 私は分の代わりに時間を表示するために 'タイプ'タイプの '入力'を使用できますか?
-
7. 私はプロジェクトでアクティビティを持っていますが、アクティビティを開始するときにfirebaseにノードがありますが、オンラインにする必要がありますが動作しません。
-
8. プロキシフィルタ内のサブクラスからデータにアクセスする
-
9. 角度サービスで定義されたメソッドを呼び出す方法
-
10. Rのカラムの条件付きソートR
-
1. 位置固定ブラウザのサイズ変更
-
2. Htmlテーブルセルのサイズ変更の効果
-
3. ブラウザの絶対位置から浮動小数点への切り替え
-
4. ウィンドウのCSS表示をサイズ変更して切り替える
-
5. HTML/CSSの位置付け〜スクリーンサイズ/解像度とブラウザのサイズ変更
-
6. raphael.jsのオブジェクトの位置決め基準の切り替え
-
7. 遅延切り替えビューの変更
-
8. ブラウザのタブの切り替え時間の差
-
9. 右揃えテーブルセルのdivの位置
-
10. JAVAFXでTableviewのセル位置を切り替える
良い点@connexo、例が更新されました。 –
ありがとうございました!私はそれらの細部を逃したために愚かであると感じ、私はまだノブであり、私はウェブ開発を学ぼうとしています。 –
関連する問題