タグ付けされた質問 「html-table」

HTMLテーブルでは、cellpaddingおよびcellspacingは次のように設定できます。 <table cellspacing="1" cellpadding="1"> CSSを使用して同じことをどのように達成できますか？

3317 html  css  html-table  alignment 

最後の行としてテーブルに行を追加するjQueryの最良の方法は何ですか？ これは受け入れられますか？ $('#myTable').append('<tr><td>my data</td><td>more data</td></tr>'); このようなテーブルに追加できるもの（入力、選択、行数など）に制限はありますか？

2425 javascript  jquery  html-table 

コンテンツを画面全体の高さいっぱいにしたいWebアプリケーションに取り組んでいます。 このページには、ロゴを含むヘッダーとアカウント情報があります。これは任意の高さになる可能性があります。content divでページの残りの部分を一番下まで埋めてほしい。 ヘッダーdivとコンテンツがありdivます。現時点では、次のようなレイアウトにテーブルを使用しています。 CSSとHTML #page { height: 100%; width: 100% } #tdcontent { height: 100%; } #content { overflow: auto; /* or overflow: hidden; */ } <table id="page"> <tr> <td id="tdheader"> <div id="header">...</div> </td> </tr> <tr> <td id="tdcontent"> <div id="content">...</div> </td> </tr> </table> コードスニペットを実行する結果を非表示スニペットを展開 ページの高さ全体が埋められ、スクロールは必要ありません。 content divの内部では、設定top: 0;によりヘッダーのすぐ下に配置されます。コンテンツは、高さが100％に設定された実際のテーブルになる場合があります。header内部contentに置くと、これは機能しません。 を使用せずに同じ効果を達成する方法はありtableますか？ …

1910 html  css  html-table 

<tbody>同じ中に複数のタグを含めることはできます<table>か？はいの場合、どのシナリオで複数の<tbody>タグを使用する必要がありますか？

594 html  html-table  xhtml 

sとsでword-wrap: break-wordテキストをラップするために使用しています。ただし、テーブルセルでは機能しないようです。1行2列のに設定されたテーブルがあります。列内のテキストは、上記でスタイル設定されていますが、折り返されません。これにより、テキストがセルの境界を越えます。これは、Firefox、Google Chrome、およびInternet Explorerで発生します。divspanwidth:100%word-wrap ソースは次のようになります。 td { border: 1px solid; } <table style="width: 100%;"> <tr> <td> <div style="word-wrap: break-word;"> Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word </div> </td> <td><span style="display: inline;">Short word</span></td> </tr> </table> コードスニペットを実行する結果を非表示スニペットを展開 上記の長い単語は私のページの境界よりも大きいですが、上記のHTMLでは壊れません。私は、追加の以下の提案を試みたtext-wrap:suppressとtext-wrap:normal、しかし助けでもありません。

566 html  css  html-table 

単純なスキーム： <tr class="something"> <td>A</td> <td>B</td> <td>C</td> <td>D</td> </tr> の固定幅を設定する必要があり<td>ます。私はもう試した： tr.something { td { width: 90px; } } また td.something { width: 90px; } ために <td class="something">B</td> そして、 <td style="width: 90px;">B</td> ただし、幅は<td>同じです。

514 css  twitter-bootstrap  width  html-table 

私はこれと交互の行の色のテーブルを使用しています。 tr.d0 td { background-color: #CC9999; color: black; } tr.d1 td { background-color: #9999CC; color: black; } <table> <tr class="d0"> <td>One</td> <td>one</td> </tr> <tr class="d1"> <td>Two</td> <td>two</td> </tr> </table> コードスニペットを実行する結果を非表示スニペットを展開 ここではのクラスtrを使用していますが、だけに使用したいと思いtableます。テーブルにクラスを使用すると、これがtr代替に適用されます。 CSSを使用してこのようにHTMLを記述できますか？ <table class="alternate_color"> <tr><td>One</td><td>one</td></tr> <tr><td>Two</td><td>two</td></tr> </table> CSSを使用して行に「ゼブラストライプ」を持たせるにはどうすればよいですか？

462 html  css  html-table 

2つのdivが並んでいます。それらの高さを同じにして、そのうちの1つがサイズ変更しても同じままにしたいです。私はこれを理解することはできません。アイデア？ 混乱を招く質問を明確にするために、両方のボックスを常に同じサイズにしたいので、テキストが配置されたために1つが大きくなった場合、もう1つは高さに合わせて大きくする必要があります。 <div style="overflow: hidden"> <div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px"> Some content!<br/> Some content!<br/> Some content!<br/> Some content!<br/> Some content!<br/> </div> <div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px"> Some content! </div> </div> コードスニペットを実行する結果を非表示スニペットを展開

441 html  css  html-table  flexbox 

ブートストラップを使用していますが、以下は機能しません。 <tbody> <a href="#"> <tr> <td>Blah Blah</td> <td>1234567</td> <td>£158,000</td> </tr> </a> </tbody>

436 html  html-table  bootstrap-4 

3 x 3のテーブルがあります。すべての行の下部に境界線を追加しtrて、特定の色を付ける方法が必要です。 最初に私は直接的な方法、すなわち： <tr style="border-bottom:1pt solid black;"> しかし、それはうまくいきませんでした。だから私はこのようなCSSを追加しました： tr { border-bottom: 1pt solid black; } それでもうまくいきませんでした。 styleすべての行に属性を追加する必要がないため、CSSを使用したいと思います。にborder属性を追加していません<table>。それが私のCSSに影響を与えないことを願っています。

386 html  css  html-table 

tdタグをすべての列にまたがるように指定するにはどうすればよいですか（テーブル内の列の正確な数が可変で、HTMLがいつレンダリングされるかを決定するのが難しい場合）？w3schoolsはを使用できると述べていますがcolspan="0"、どのブラウザーがその値をサポートしているかを正確に示していません（IE 6はサポートするリストにあります）。 colspan理論上の列数よりも大きい値に設定しても機能するようですが、にtable-layout設定した場合は機能しませんfixed。多数の自動レイアウトを使用することの欠点はありますcolspanか？これを行うより正しい方法はありますか？

385 html  html-table  tablelayout 

編集-元のタイトル：（折りたたみ、丸みを帯びたコーナーテーブルを作成するためborder-collapse:collapseにCSS）を達成する別の方法はありますか？ テーブルの境界線を折りたたむだけでは根本的な問題は解決されないことが判明したので、議論をより反映するようにタイトルを更新しました。 CSS3 border-radiusプロパティを使用して、角が丸いテーブルを作成しようとしています。私が使用しているテーブルスタイルは次のようになります。 table { -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px } ここに問題があります。border-collapse:collapseプロパティも設定したいのですが、設定するとborder-radius機能しなくなります。border-collapse:collapse実際に使用しなくても同じ効果を得ることができるCSSベースの方法はありますか？ 編集： ここで問題を説明する簡単なページを作成しました（Firefox / Safariのみ）。 問題の大部分は、コーナーを丸くするようにテーブルを設定しても、コーナーtd要素のコーナーに影響しないことです。テーブルがすべて1色の場合はtd、最初の行と最後の行でそれぞれ上隅と下隅を丸めることができるので、これは問題にはなりません。ただし、見出しとストライプを区別するためにテーブルの背景色を変えているので、内側のtd要素にも丸い角が表示されます。 提案されたソリューションの概要： 丸い角を持つ別の要素でテーブルを囲むと、テーブルの四角い角が「にじむ」ため、機能しません。 ボーダーの幅を0に指定しても、テーブルは折りたたまれません。 ボトムtdゼロにCELLSPACINGを設定した後、まだ直角の角。 代わりにJavaScriptを使用すると、問題を回避できます。 可能な解決策： テーブルはPHPで生成されるので、外側のth / tdsのそれぞれに異なるクラスを適用し、各コーナーを個別にスタイル設定できます。あまりエレガントではなく、複数のテーブルに適用するのが少し面倒なので、私はこれをしたくないので、提案を続けてください。 考えられる解決策2は、JavaScript（具体的にはjQuery）を使用してコーナーのスタイルを設定することです。この解決策も機能しますが、私が探しているものはまだ十分ではありません（私はうるさいです）。2つの予約があります。 これは非常に軽量なサイトです。JavaScriptを最小限に抑えたいと思います border-radiusを使用することの私にとっての魅力の一部は、優雅な低下と漸進的な強化です。丸みを帯びたすべての角にborder-radiusを使用することで、CSS3対応のブラウザーでは常に丸みを帯びたサイトになり、他のブラウザーでは一貫して正方形のサイトになりたいと思っています（私はIEを見てます）。 今日、CSS3でこれを実行する必要がないように思えるかもしれませんが、私には理由があります。また、この問題はw3c仕様の結果であり、CSS3のサポートが不十分ではないため、CSS3がより広範囲にサポートされている場合でも、どのソリューションも関連性があり有用です。

317 html  css  rounded-corners  html-table 

jQueryでテーブル行を削除するための最良の方法は何ですか？

309 javascript  jquery  html-table 

簡単な解決策が必要です。私はそれが他のいくつかの質問に似ていることを知っています： 固定ヘッダーと固定列を持つHTMLテーブル？ JavaScriptとCSSを使用して、スクロール時にテーブルの最初の行と最初の列をどのようにロックできますか？ しかし、左の列を1つだけ固定する必要があるので、シンプルでスクリプトを使用しないソリューションを使用します。

266 html  css  html-table 

次のマークアップを考えると、CSSを使用して、1つのセル（列内のすべてのセル）を、ストレッチ（デフォルトの動作）ではなく、その中のコンテンツの幅に合わせることができますか？ <style type="text/css"> td.block { border: 1px solid black; } </style> <table style="width: 100%;"> <tr> <td class="block">this should stretch</td> <td class="block">this should stretch</td> <td class="block">this should be the content width</td> </tr> </table> 編集：私は幅をハードコーディングできることを知っていますが、その列に入るコンテンツは動的であるため、私はむしろそれをしたくありません。 下の画像を見ると、最初の画像はマークアップが生成するものです。2番目の画像は私が欲しいものです。

266 html  css  html-table