バージョン選択

フォーラム

メニュー

オンライン状況

27 人のユーザが現在オンラインです。 (15 人のユーザが フォーラム を参照しています。)
登録ユーザ: 0
ゲスト: 27
もっと...

サイト内検索

質問 > その他 > 商品説明にHTMLテーブル設置

その他

新規スレッドを追加する

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
ceduna
投稿日時: 2022/2/25 12:51
対応状況: −−−
半人前
登録日: 2021/9/8
居住地:
投稿: 17
商品説明にHTMLテーブル設置
EC-CUBE
4.1.2
サーバーOS
Linux eccube-544d894f9-jf26n 5.4.129+ #1 SMP Mon Sep 27 19:58:19 PDT 2021 x86_64
DBサーバー
PostgreSQL 10.6 on x86_64-pc-linux-gnu, compiled by gcc (Debian 6.3.0-18+deb9u1) 6.3.0 20170516, 64-bit

-------------------
商品ページにHTMLタグが使えるというので、下記タグを書きましたが、商品説明に空白行ができてしまいました。
テーブルの見にくいのですが、きれいに表示できるHTMLテーブルを
押してください。

<table>
<tbody>
<tr bgcolor="#b5ceea">
<td>メンズ</td>
<td>M</td>
<td>L</td>
<td>LL</td>
<td>3L</td>
</tr>
<tr>
<td bgcolor="#b5ceea">着丈</td>
<td>71</td>
<td>73</td>
<td>75</td>
<td>77</td>
</tr>
<tr>
<td bgcolor="#b5ceea">肩幅</td>
<td>48</td>
<td>49</td>
<td>50</td>
<td>52</td>
</tr>
<tr>
<td bgcolor="#b5ceea">胸囲</td>
<td>110</td>
<td>114</td>
<td>118</td>
<td>124</td>
</tr>
<tr>
<td bgcolor="#b5ceea">裾回り</td>
<td>110</td>
<td>114</td>
<td>118</td>
<td>124</td>
</tr>
</tbody>
</table>
mcontact
投稿日時: 2022/2/25 14:18
対応状況: −−−
半人前
登録日: 2022/1/22
居住地:
投稿: 20
Re: 商品説明にHTMLテーブル設置
CSSなどでtable/tr/tdタグの装飾にて、テーブルタグの枠線などが消えているからじゃないですか?
ceduna
投稿日時: 2022/2/25 16:39
対応状況: −−−
半人前
登録日: 2021/9/8
居住地:
投稿: 17
Re: 商品説明にHTMLテーブル設置
下記CSSを登録したのですが、上に余白があり、テーブルも一番左の列が細くなってしまい、表示がうまくいきません。
--------------
table{
width: 100%;
border-collapse:separate;
border-spacing: 0;
}

table th:first-child{
border-radius: 5px 0 0 0;
}

table th:last-child{
border-radius: 0 5px 0 0;
border-right: 1px solid #3c6690;
}

table th{
text-align: center;
color:white;
background: linear-gradient(#829ebc,#225588);
border-left: 1px solid #3c6690;
border-top: 1px solid #3c6690;
border-bottom: 1px solid #3c6690;
box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset;
width: 25%;
padding: 10px 0;
}

table td{
text-align: center;
border-left: 1px solid #a8b7c5;
border-bottom: 1px solid #a8b7c5;
border-top:none;
box-shadow: 0px -3px 5px 1px #eee inset;
width: 25%;
padding: 10px 0;
}

table td:last-child{
border-right: 1px solid #a8b7c5;
}

table tr:last-child td:first-child {
border-radius: 0 0 0 5px;
}

table tr:last-child td:last-child {
border-radius: 0 0 5px 0;
}
ceduna
投稿日時: 2022/2/28 12:33
対応状況: −−−
半人前
登録日: 2021/9/8
居住地:
投稿: 17
Re: 商品説明にHTMLテーブル設置
HTMLの改行を消したところ、無駄な改行が消えました。
あとはテーブルが3Lのテーブルサイズが小さくなることが解消できていません。
ceduna
投稿日時: 2022/2/28 14:35
対応状況: 解決済
半人前
登録日: 2021/9/8
居住地:
投稿: 17
Re: 商品説明にHTMLテーブル設置
下記追加して解決しました。

table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
table-layout: fixed;/*←追加*/
スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ


 



ログイン



統計情報

総メンバー数は75,086名です
総投稿数は104,360件です

投稿数ランキング

1
seasoft
7333
2
468
3217
3
AMUAMU
2712
4
nanasess
2202
5
umebius
2085
6
yuh
1664
7
red
1535
8
h_tanaka
1189
9
tsuji
942
10
fukap
907
11
shutta
835
12
tao_s
794
13 ramrun 789
14 karin 689
15 sumida 641
16
homan
633
17 DELIGHT 572
18
patapata
502
19
flealog
485
20 tonton 437
Copyright© EC-CUBE CO.,LTD. All Rights Reserved.