特定の部分で適用されないCSSがある

特定の部分で適用されないCSSがあります
該当のコードは以下になります。

php
1<?php
2include 'shop_class.php';
3session_start();
4if(!isset($_SESSION['id'])){
5  header('Location:login.php');
6}
7$sum = 0;
8$shop = new Shop('mysql:host=localhost;dbname=ec_website','root','12345');
9
10if(isset($_POST)){
11
12  $shop->delete_cart_item($_SESSION['id']);
13  $item = $shop->cart_list($_SESSION['id']);
14
15  // var_dump($_POST);
16  // exit();
17  $item_list = filter_input(INPUT_POST,'item_data');
18  // var_dump($item_list);
19  // exit();
20  $item_list = json_decode($item_list,true);
21
22  
23
24  foreach($item_list as $item){
25    $item_info_list[] = $shop->item_info_list($item['item_id']);
26  }
27
28//    var_dump($item_info_list);
29//    var_dump($item_list);
30//  exit();
31
32  for($i = 0; $i < count($item_list); $i++){
33    if($item_info_list[$i]['id'] === $item_list[$i]['item_id']){
34      $sum += $item_list[$i]['amount'] * $item_info_list[$i]['price'];
35    }
36  }
37
38  //var_dump($sum);
39 // exit();
40  
41}
42
43?>
44
45
46<!DOCTYPE html>
47<html lang="ja">
48<head>
49  <meta charset="UTF-8">
50  <link type="text/css" rel="stylesheet" href="./css/cart.css">
51    
52  <title>カートページ</title>
53</head>
54<body>
55  <header class="header_box">
56    
57      <a href="top.php" class="top_logo">
58        <img class="logo" src="./images/logo.png" alt="CodeShop">
59      </a>
60  
61      <p class="user_name">
62        ユーザー名:<?php echo $_COOKIE['name']; ?>
63      </p>
64      <a href="cart.php">
65        <img src="./images/cart.png">
66      </a>
67      <a href="logout.php" class="logout">
68        ログアウト
69      </a>
70      </header>
71      <div class="cart_content">
72        
73        <p class="msg">商品はありません</p>
74        <p class="finish_msg">ご購入ありがとうございました</p>
75  
76          <div class="product_list_title">
77            <span class="product_list_price">価格</span>
78            <span class="product_list_num">数量</span>
79          </div>
80
81          <table>
82            <?php for($i = 0; $i < count($item_list); $i++): ?>
83            <tbody class="list">
84              <tr class="cart_table">
85                <td><img src="<?= $item_info_list[$i]['img']?>" width="150px" height="100px"></td>
86                <td class="item_name"><?= $item_info_list[$i]['name']?></td>
87                <td>￥<?= $item_info_list[$i]['price']?></td>
88                <td><?= $item_list[$i]['amount'] ?></td>
89            </tbody>
90
91            <?php endfor;?>
92          </table>
93
94
95
96      </div> 
97    
98</body>
99</html>

css
1.header_box{
2  background-color: #0D2851;
3  display:flex;
4  margin-bottom:30px;
5  justify-content: center;
6  
7}
8.top_logo{
9  width:45%;
10}
11
12.msg{
13  color:red;
14}
15.finish_msg{
16  background-color:#FFF2DC;
17  width:100%;
18  text-align:center;
19  line-height:3;
20  font-size:21px;
21}
22.item_price{
23  color:red;
24}
25.sum{
26  margin-left:607px;
27}
28.sum_price{
29  color:red;
30  font-size:30px;
31  margin-left:20px;
32}
33.buy_btn{
34  background-color:orange;
35  border:none;
36  width:100%;
37  height:53px;
38  color:#fff;
39  font-size:22px;
40  cursor: pointer;
41  cursor: hand;
42  margin-top:20px;
43}
44.border{
45  border-bottom:1px solid #ccc;
46}
47.cart_content{
48  width:960px;
49  margin:0 auto;
50}
51.cart_list{
52  display:flex;
53}
54.item_name{
55  margin-left:20px;
56  margin-right:300px;
57}
58.item_price{
59  margin-left:53px;
60  margin-right:67px;
61}
62.product_list_title{
63  border-bottom:1px solid #ccc;
64}
65.product_list_price{
66  margin-left:691px;
67}
68.product_list_num{
69  margin-left:150px;
70}
71.cart_list{
72  border-bottom:1px solid #ccc;
73}
74
75.cart_table{
76  border-bottom:2px solid black;
77}
78
79body{
80  font-size:16px;
81
82}
83.content{
84  display:flex;
85  width:960px;
86  margin:  auto;
87  flex-wrap: wrap;
88  
89}
90
91
92.user_name{
93  color:#fff;
94}
95.logout{
96  color:#fff;
97  margin-left:16px;
98  margin-top:14px;
99  text-decoration:none;
100}
101
102

現在確認できています適用されないクラス名は、<table>タグ内の「cart_table」及び、「item_name」です。
こちらは、デベロッパーツールにて確認すると確かに適用されているのですが、実際には全く反映されておらず、デベロッパーツールにて値を変更しても全く表示に変化はありません。
ブラウザ(gooogle chrome)にて、リロードの際、「キャッシュの削除とハード再読み込み」を選択し再読み込みを試みましたが、変化はありませんでした。
原因が分かる方いらっしゃいましたら、ご助言頂けましたら幸いです。
よろしくお願いします。

m.ts10806

2019/05/28 05:30 編集

画面キャプチャをご提示ください。また、今回PHPコードは一切必要ない部分となり、ノイズにしかなりませんのでブラウザ「ソースを表示」で表示されたHTMLをご提示ください。あと、「適用されていない」を判断するには指定が少なすぎます。 borderであれば色を変えてみたりサイズを大きくしてみたりborder styleを変えてみたり、trなら背景色をつけてみたりして、「反映されていない」のか「別の何かが影響している」のか「反映されているけどそう見えないだけ」なのかの問題切り分けを行ってください。 ※あとできれば初めに要件を述べてください。起きている問題を把握してからコードを見るのが通常の流れです。質問テンプレートもコード提示場所はこんなに早くありません。

行動規範の内容に同意します

回答1件

ベストアンサー

CSSの仕様です。

table要素に直接borderプロパティと、
td要素にmarginは効かせられません。（paddingは効く）
別の方法で、同様のスタイルを効かせるしかありません。

投稿2019/05/28 05:27

miyabi_pudding

総合スコア9528

toll_tree

2019/05/28 05:35

ご回答ありがとうございます。え！そうだったんですね...だからデベロッパーツールでいくら値を変更しても変化がなかったんですね... 実は、cart.cssは他のphpファイルにも適用していまして、その中では確かにmarginが適用されていたので、おかしいと思ったのですが、良く見ると<td>タグの中に<span>を使っており、そのspanタグに対して、cssを使用していました。勉強になりました。

miyabi_pudding

2019/05/28 07:45

解決されてよかったです。 boderに関しては、tdもしくはthに効かせるといいでしょう。隙間は、paddingで効かせるといいでしょう。ただし、boderを効かせてるセルだったとしたら、内側に隙間になります。もし、ボーダーの外側に隙間となると、少し工夫が必要になります。調べてみて、やってみて、わからなければ別途質問立てられるとよろしいかと思います。

行動規範の内容に同意します