css-tables 相关问题

使用此标记而不仅仅是[css]来解决有关使用CSS设置HTML <table>元素样式的问题，或者使用CSS display：table属性声明来定义元素的布局以模仿HTML <table>的布局。

修复表格单元格边框时它们是透明的

我正在尝试创建一个可以具有固定列的 Svelte 表格组件（尽管我认为 Svelte 与此无关）。基本逻辑似乎有效，但有一个非常奇怪的问题......

html css html-table svelte css-tables

回答 1 投票 0

如何确定单元格中的块对垫头单元格的粘附（粘性）？

我有一个 Angular 桌子。向下滚动表格时，如何使第一列单元格中的 span 元素粘在粘性垫标题行上？滚动表格时，span 元素

angular typescript css-tables sticky

回答 1 投票 0

HTML 表格不会使内容占据全角

我制作了这个表，其中包含 html 元素：我制作了这个表，其中包含 html 元素： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <table style="width: 100%; border: #000 solid 1px"> <tr> <th>Table 1</th> <th>Table 2</th> <th>Table 3</th> </tr> <tr> <td> <table style="border: #000 solid 1px;"> <tr> <th>Name</th> <th>Age</th> <th>Occupation</th> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </table> </td> <td> <table style="border: #000 solid 1px;"> <tr> <th>Name</th> <th>Age</th> <th>Occupation</th> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </table> </td> <td> <table style="border: #000 solid 1px;"> <tr> <th>Name</th> <th>Age</th> <th>Occupation</th> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </table> </td> </tr> </table> </body> </html> 我希望 3 个表格等量增加，以便占据表格元素的完整大小，在图像的右侧，您可以看到表格没有完全占据。边框标记了表格元素占据的空间（为了占据全角，我将宽度设置为 100%）。正如您所看到的，内容没有分布以占据表格元素，我该怎么做才能使内容占据表格元素的全宽？我尝试将表格元素宽度设置为 100%，但只是表格元素拉伸到页面宽度，内容保持不变。表格不一定占用 100% 的宽度，因此您还必须为子表格分配宽度。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <table style="width: 100%; border: #000 solid 1px"> <tr> <th>Table 1</th> <th>Table 2</th> <th>Table 3</th> </tr> <tr> <td> <table style="width: 100%; text-align: center; border: #000 solid 1px;"> <tr> <th>Name</th> <th>Age</th> <th>Occupation</th> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </table> </td> <td> <table style="width: 100%; text-align: center; border: #000 solid 1px;"> <tr> <th>Name</th> <th>Age</th> <th>Occupation</th> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </table> </td> <td> <table style="width: 100%; text-align: center; border: #000 solid 1px;"> <tr> <th>Name</th> <th>Age</th> <th>Occupation</th> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </table> </td> </tr> </table> </body> </html>

html css html-table css-tables

回答 1 投票 0

css table th 和 td 不占宽度的 100%

我想通过仅操纵CSS来使th和td都是100％宽度。看起来 th 延伸得很远，但从未完全推出 td。这段代码有什么问题？ .自定义表{ 迪...

css html-table css-tables

回答 1 投票 0

Vuejs - vue3-easy-data-table

我正在使用 vuejs 开发一个使用“vue3-easy-data-table”的项目，我遵循此页面上的样式建议。 https://hc200ok.github.io/vue3-easy-data-table-doc/features/style-

javascript css typescript vue.js css-tables

回答 3 投票 0

将 Laravel 表从单个 foreach 分成 4 列

我有一个包含数据的foreach循环。我正在使用 foreach 循环将数据回显到表中。 @foreach($data 作为$key) {{$key->选项名称}} @

php laravel css-tables

回答 1 投票 0

如何让内部元素在保持居中的同时水平溢出外部元素？

我有以下 HTML/CSS 网页：身体 { 保证金：0； } 主要的 { 宽度：50%；最小宽度：600px；保证金：自动；边框：1px 纯红色； /* 用于调试目的 */ } .wide-table { ...

html css css-tables

回答 1 投票 0

CSS height 属性不适用于显示：表格？

<main class="table-container"> <div id="table-row"> <section id="product-image" class="table-column"> <img src="https://lh3.googleusercontent.com/pw/AIL4fc8rzyaDFLe2uyFDdLC37ni6h2hoaEcvBkxtIKD4C_CsCscJB1nEIOBSkfi50g1juG9_AwqblO_aamPn2lId6cXOusbgZ0dY54ifsbHzoZ1o6krpArxXZTey9xOKIM08vBVClOKH6815Yc0oHP4Qu-Di3LyAKew8xk1XgFcMlWPW5aZb72JSBZGsXFCFVN9sSeENkBNakQXuCTL87Dd_3M6nZIRkM9hGctJbKo__4kcIjs6n-Y3rdAxyz2T2RriVvwnsJHLD_MiuQj2LFhkISoKUoYyROFzvNFS2ln_PiIC90M4rKrO89ioBoIZ-zc-4ilxcMtB66ukR04sSc6_vAD-6ZKjxYVkmYW5LIbmY_3Z3XeOMKG6BgLWOLRRB5sLFCoZCP4Hka8ahKC_whIthNlCEEDaJAi1ceeWJv1b2y2WN7V2RuBMR2L28B0tj584gujMkbKkO3xv04xUFrQyEZT1f3n96lmkYy5NLizwWz-dCOayXyuocWqcPJ0xfUD9y9G8XjnoueZVc383VO9v-vxMG1U38RpwRw2Y6zqAsheoiLli2k8_ol_37RjVhlmw6986SPe8SCoDjuZHT4g_SUQulcbXaVgim0BkpAyuXvMk2-WJK3NYGAI6X4GSrcCwBLKKtQODC_TPz7ZYN-HqLE78NnL_TpBbZBGBsXvj27EwVAWknph-bs2H46CGkaIQ2Q-nKH2CLEbMD9MmyGLgOjQ7kOCKpwdzpEXzk8pPZLU9IVVynm00aFnA5-JRHm1K427WmyMIbRl_88GbF4tG7AHtAnqRppB04QjaUzKuzn1oiXdqaiMIL8NIxi_MvSK7lcHhBPUHHKv_Bi7ac6NvLi40cfOoohw8oeNt6vHAWWEYh6y5YguA6ggFk9Ri2UsmOH4A94qYEGWMndyRMiiMz737Ca5QcIwtSyUu3mimFfHfAcoNN5NxemTQuqy2iDkDio4n6dCCW9b-fsJNH3nuXdU74MQzl2sxNYGYr9xgcVDAQ1r_1F33Ny7lXhCPxHjn07Ro=w572-h857-s-no?authuser=0" alt="image of perfume Product" id="mobile" /> </section> <section id="description" class="table-column"> Perfume Gabrielle Essence Eau De Parfum A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL. $149.99 $169.99 Add to Cart </section> </div> </main> body { background-color: hsl(30, 38%, 92%); } main { border: 1px solid blue; margin: auto; width: 55vw; height: 41.25vw; } div { border: black; width: 100%; height: 100%; } section#product-image { border: 1px solid red; width: 50%; } section#product-image img#mobile { width: 100%; height: auto; } #description { background-color: rgb(255, 255, 255); } .table-container { display: table; } .table-row { display: table-row; } .table-column { display: table-cell; vertical-align: top; } 对于 main （表格容器），我使用 vw 值作为高度，但不起作用。所以，我使用了 px 值，但仍然不起作用。我的目标是使 section#product-image 的尺寸具有 img#mobile 图像尺寸的纵横比（重量与高度的比率）。因此，使用 width: 100% 和 height: auto 时，图像完全填充容器。图像的长宽比为2/3。请参考原帖的评论。请尝试以下HTML：- <main class="table-container"> <div class="table-row">  <section id="product-image" class="table-column"> <img src="<Your Image URL>" alt="image of perfume Product" id="mobile" /> </section> <section id="description" class="table-column"> Perfume Gabrielle Essence Eau De Parfum A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL. $149.99 $169.99 Add to Cart </section> </div> </main> PS：别忘了在上面的代码中粘贴img URL。这是修改后的.css定义：- body { background-color: hsl(30, 38%, 92%); } main { border: 1px solid blue; margin: auto; width: 55vw; } div { border: black; width: 100%; } section#product-image { border: 1px solid red; width: 50%; padding-bottom: calc(100% * 3 / 2); position: relative; overflow: hidden; } section#product-image img#mobile { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; } #description { background-color: rgb(255, 255, 255); } .table-container { display: table; } .table-row { display: table-row; } .table-column { display: table-cell; vertical-align: top; } 希望这是您正在寻找的。您可以尝试修改 .css 定义来查看显示行为问题是照片下方的间隙？使用line-height: 0 section#product-image { border: 1px solid red; width: 50%; line-height: 0; } body { background-color: hsl(30, 38%, 92%); } main { border: 1px solid blue; margin: auto; width: 55vw; height: 41.25vw; } div { border: black; width: 100%; height: 100%; } section#product-image { border: 1px solid red; width: 50%; line-height: 0; } section#product-image img#mobile { width: 100%; height: auto; } #description { background-color: rgb(255, 255, 255); } .table-container { display: table; } .table-row { display: table-row; } .table-column { display: table-cell; vertical-align: top; } <main class="table-container"> <div id="table-row"> <section id="product-image" class="table-column"> <img src="//picsum.photos/200/300" alt="image of perfume Product" id="mobile" /> </section> <section id="description" class="table-column"> Perfume Gabrielle Essence Eau De Parfum A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL. $149.99 $169.99 Add to Cart </section> </div> </main>

html display css-tables aspect-ratio

回答 2 投票 0

如何为表格定义一个类来控制表格行的样式

我想知道我是否可以定义一个类来控制表格中的行样式。可以说我定义了一个类“aTable” 。一张桌子 { 宽度：800px；边框间距：2px； } 我也想...

css row css-tables

回答 3 投票 0

如何使用 <td> 选择器更改嵌套在 <div> 元素中的 <div> 元素的颜色？ [重复]

我正在创建歌曲的 HTML 文档（特别是 kPop），并对歌手的歌词进行颜色编码。最初，我向元素添加类，这确实有效。但我是

html css css-selectors css-tables

回答 2 投票 0

如何使我的代码看起来像屏幕截图？

我难住了。我需要帮助使我的代码看起来像提供的屏幕截图。我正在使用 Microsoft Visual Code。正确的截图我需要我的代码看起来像这就是我当前屏幕的样子...