table内の文字がずれる

Question

前提・実現したいこと

画面上で<th>や<td>内の文字がずれて表示されるので
全てセル内に収まるようにしたいです。

該当のソースコード

@CHARSET "UTF-8";

body {
    color: #333333;
    font-family: "Hiragino Kaku Gothic Pro",Meiryo,"MS PGothic",Helvetica,Arial,sans-serif;
}

#header {
    width: 100%;
    height: 70px;
    background-color: #333333;
}

#content {
    width: 94%;
    margin-top: 15px;
    padding-left: 3%;
}

h1 {
    width: 94%;
    padding-top: 17px;
    padding-left: 3%;
     font-size: 24px;
    display: inline;
    color: #eeeeee;
}

th {
    width: 50%;
    padding: 10px 2%;
    text-align:center;
}

td {
    width: 66%;
    padding: 10px 2%;
    text-align:center;
}
h2 {
    font-size: 36px;
    margin-bottom: 15px;
}

li {
    margin-top: 10px;
    margin-bottom: 10px;
}

p {
    margin-top: 15px;
    margin-bottom: 15px;
}

a {
    text-decoration: none;
    color: #24738e;
}
table, tr, th, td {
    border: 1px solid #cccccc;
}
th,td {
	white-space: nowrap;

}

table {
    width: 100%;
    table-layout: fixed;
}
button {
    font-size: 14px;
    padding: 5px 10px;
}

#footer {
    text-align: center;
}
#flush_success {
    width: 100%;
    padding-top: 28px;
    padding-left: 2%;
    padding-bottom: 28px;
    margin-bottom: 15px;
    color: #155724;
    background-color: #d4edda;
}
#flush_error {
    width: 100%;
    padding-top: 28px;
    padding-left: 2%;
    padding-bottom: 28px;
    margin-bottom: 15px;
    color: #721c24;
    background-color: #f8d7da;
}
table.employee_list th {
    width: 30%;
    padding: 10px 2%;
}


#header a {
    color: #eeeeee;
}
table.Truck_table th.space1{
	width:200px;
	position:sticky;
	top:0;
	left:0;
	z-index: 5;
back-ground-color: #808080;
}
table.Truck_table thead th {
	position: -webkit-sticky;
	position: sticky;
	white-space: nowrap;
}
.Truck_table thead tr:nth-child(1) th {
  top: 0;
}
.Truck_table thead tr:nth-child(2) th {
  top: 1.5rem; /* 2行目は1行目の高さの位置に固定する */
}
table.Truck_table{
	width:300%;
	 padding: 10px 2%;
	 overflow: scroll;
}
h1 a {
    color: #eeeeee;
}
h1 {
    font-size: 24px;
    display: inline;
}
pre {
    font-family: "Hiragino Kaku Gothic Pro",Meiryo,"MS PGothic",Helvetica,Arial,sans-serif;
}
h3 {
    font-size: larger;

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>


<c:import url="/WEB-INF/views/layout/app.jsp">
    <c:param name="content">
        <c:if test="${flush != null}">
            <div id="flush_success">
                <c:out value="${flush}"></c:out>
            </div>
        </c:if>
        <h2>車両　一覧</h2>

        <p><a href="<c:url value='/dispatch/new' />">新規登録</a></p>
        <p><a href="<c:url value='/dispatch/edit' />">登録情報変更</a></p>

              <table class="Truck_table">
            <thead>
                 <tr>
                    <th class="space1" rowspan="2" colspan="4"></th>
                    <%
                       for (int i =0; i<31; i++){
                    	   out.println("<th class='date' colspan='4'>" + "1月"+(i+1)+"日" + "</th>");
                       }
                    %>
                </tr>
                <tr>

                        <th>宵積卸地</th>
                        <th>積地</th>
                        <th>卸地</th>
                        <th>宵積</th>

                    </tr>
                    </thead>

<c:if test="${Trucks.task_date == date}" var="flg"/>

<c:if test="${flg}">

<c:forEach var="trucks" items="${trucks}" varStatus="status">

                     <tbody>

                    <tr>
                    <td class="office_name" rowspan="4"><c:out value="${trucks.office_name}"></c:out></td>
                    <td class="truck_code" colspan="2" rowspan="4"><c:out value="${trucks.truck_code}"></c:out></td>
                    <td class="truck_type" rowspan="4"><c:out value="${trucks.truck_type}"></c:out></td>



                    <td class="mw_time"><c:out value="${trucks.mw_time}"></c:out></td>
                    <td class="sa_time"><c:out value="${trucks.sa_time}"></c:out></td>
                    <td class="wa_time"><c:out value="${trucks.wa_time}"></c:out></td>
                    <td class="es_time"><c:out value="${trucks.es_time}"></c:out></td>

                    </tr>
                    <tr>
                        <c:forEach begin="1" end="31">
                        <td class ="宵積卸地"><c:out value="${trucks.m_wholesale_area}"></c:out></td>
                        <td class ="積地"><c:out value="${trucks.stack_area}"></c:out></td>
                        <td class ="卸地"><c:out value="${trucks.wholesale_area}"></c:out></td>
                        <td class ="宵積"><c:out value="${trucks.e_stack_area}"></c:out></td>
                        </c:forEach>
                    </tr>
                        <tr>

                    <td class="mw_time"></td>
                    <td class="sa_time"></td>
                    <td class="wa_time"></td>
                    <td class="es_time"></td>

                   </tr>
                   <tr>

                        <td class ="宵積卸地"></td>
                        <td class ="積地"></td>
                        <td class ="卸地"></td>
                        <td class ="宵積"></td>
                     </tr>
                     </tbody>
                 </c:forEach>
                 </c:if>
                 <c:if test="${!flg }">
                 <c:if test="${flg==null}">
    <div id="flush_error">
       入力内容にエラーがあります。<br />
       <c:out value="${error}" /><br />
                 </div>
                 </c:if>
                 </c:if>
        </table>

    </c:param>
</c:import>

##実際の画面

Comments

[m.ts10806]

モック作ってからやらないからでは。
html,cssに絶対の自信があるのならいいんですが。

Answer 1

white-space: nowrap;
をコメントアウトするか、セルの幅を調整する、ですかね。

そもそもこの CSS はどこから持ってきたんでしょうか。
理解していない CSS を全部コメントアウトしてから始めてはどうでしょう。

Comments

[K_3578]

回答ありがとうございます。
返信が大幅に遅れてしまって申し訳ありません。
一度、コメントアウトの方、試してみます

Answer 2

自分でスタイルシートを書き直して見たところずれを解消できました。