Css JSP中的对齐表
我目前有以下情况:Css JSP中的对齐表,css,forms,jsp,alignment,Css,Forms,Jsp,Alignment,我目前有以下情况: <%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functio
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Hotel Occupancy</title>
</head>
<body>
<c:forEach begin="1" end="${noHotels}" varStatus="loop">
<h1 align="center">${hotelLoc[loop.index - 1]}</h1>
<form action='cartController' method='POST'>
<table style="width:1000px" style="text-align:center">
<tr style="text-align:center">
<th>Room Type</th>
<th>Occupied</th>
<th>Available</th>
</tr>
<c:forEach var="item" items="${hotelOccupancy}">
<c:if test="${item.hotelID == loop.index}">
<tr style="text-align:center">
<td>${item.roomType}</td>
<td>${item.occupied}</td>
<td>${item.available}</td>
</tr>
</c:if>
</c:forEach>
</table>
</form>
</c:forEach>
酒店入住率
${hotelLoc[loop.index-1]}
房间类型
占用
可用
${item.roomType}
${item.occupated}
${item.available}
结果如下:
有人能帮我把桌子对齐吗?您的问题是:
- 占据
全宽的标题(正文
)。此标题的文本居中对齐,因此它显示在h1
正文的中心
- 固定宽度小于身体宽度的桌子。这张桌子在身体的左边对齐。因此,标题和表格彼此不对齐。在更大的屏幕上,您的问题将更加明显
div
中。将表格宽度设置为100%,然后将div
的宽度设置为所需的宽度。我提出了一个来说明这种方法
但是,除非绝对必要,否则我不建议为任何元素设置固定宽度,因为这将导致更严格的布局。例如,您提供的布局不适合屏幕分辨率低于1000像素的任何人
tr, h2 {
text-align:center;
}
table {
background-color: #FFFFCC;
}
h2 {
background-color: #FFCCFF;
}
div {
border : 1px solid lightgray;
}
标题
A.
B
C
1.
1.
1.
2.
2.
2.
3.
3.
3.
标题
A.
B
C
1.
1.
1.
2.
2.
2.
3.
3.
3.
您期望的输出是什么?
<h2>Title</h2>
<table style="width:300px">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
</tbody>
</table>
<hr>
<div style="width:300px;">
<h2>Title</h2>
<table style="width:100%;">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>