时间戳

首页 > 解决方案 > javascript构建表中的图像和单元格间距

javascript - javascript构建表中的图像和单元格间距

问题描述

首先让我先说我对 javascript 很陌生。我目前正在研究该主题，作为我正在学习的课程的一部分。

我有一个任务，要求我将图像切片放在由 javascript 构建的表格中，并将其放在 HTML 页面上。

我在所有这方面都取得了成功，除非我尝试使用 CSS 调整表格和 div 部分的大小，图像分开，在图像中留下空隙。有没有人可以看到我为什么会遇到这个问题？我把头发拉出来。

这是我的代码。

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bazaar Ceramics</title>

<!--[if IE]>
<link type="text/css" rel="stylesheet" media="all" href="ie_only.css"/>      <![endif]-->
<link href="../../CSS/ie_only.css" rel="stylesheet" type="text/css">
<link href="../../CSS/laptop.css" rel="stylesheet" type="text/css">
<link href="../../CSS/Layout.css" rel="stylesheet" type="text/css">
<link href="../../CSS/mobile.css" rel="stylesheet" type="text/css">
<link href="../../CSS/style.css" rel="stylesheet" type="text/css">
<link href="../../CSS/tablet.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="mainwrapper">
<div id="header"><img id="logo" src="../../images/bazaar-logo.jpg"   alt="Bazaar Ceramics Logo"><h1 class="title">Bazaar Ceramics</h1>
</div><!--this is the end of div Header-->
    <div id="ImageContent"><script src="../../Script/ImageContent.js">   </script></div><!--this is the end of div id ImageContent-->
    <div id="formContent">
        <h1 class="prodhead">Order Item</h1>
        <form action="#" name="orders">
        <table id="formtab">
            <tr>
                <td width="20%"><label>Item Description:</label></td>   <td><input type="text" name="description" size="100%" value="Red Bowl" disabled></td>
            </tr> 
            <tr>
                <td><label>Quantity:</label></td><td><input type="text" name="quantity" value="1" min="1"></td>
            <tr>
                <td><label>Price:</label></td><td><input type="text" name="price" value="$350" disabled></td>
            </tr>
            <tr>
                <td><label>Total Price:</label></td><td><input type="text" name="total"></td>
            </tr>
            <tr>
                <th colspan="2"><input type="button" name="clear" value="Clear Form" id="button"> <input type="button" name="calculate" value="Calculate Total" id="button"> <input type="button" name="Submit" value="Submit Order" id="button"></th>
        </table>
        </form>
    </div><!--this is the end of div id formContent-->
    <div id="footer">
   <a href="../../index.html">Home</a>
   <a href="members.html">Close</a>

<br style="clear:both"><p id="copyright">Copyright 2018 Online System Solutions</p></div><!--this is the end of dive id footer-->
</div><!--end of mainwrapper-->


</body>

</html>

CSS 代码

.myTable {
max-width:90%;

}
.myImg{
display:block;
max-width: 100%;
height: auto;
width: auto;
vertical-align:middle;
}

javascript

// constants
var colCount=5;
var rowCount=4;

// input data
var col1 = new Array("r1_c1","r2_c1","r3_c1","r4_c1");
var col2 = new Array("r1_c2", "r2_c2", "r3_c2", "r4_c2");
var col3 = new Array("r1_c3", "r2_c3", "r3_c3", "r4_c3");
var col4 = new Array("r1_c4", "r2_c4", "r3_c4", "r4_c4");
var col5 = new Array("r1_c5", "r2_c5", "r3_c5", "r4_c5");

// create the column array.
var collist = [col1,col2,col3,col4,col5];

// make the table.
document.write('<table class="myTable" cellspacing="0" cellpadding="0"     align="center">');
for (rownum = 1; rownum <= rowCount; rownum++) {

 document.write("<tr>");
 for (colnum = 1; colnum <= colCount; colnum++) {  
     document.write("<td>" + '<img src="../../images/Large/bcpot002_' + (collist[(colnum-1)])[(rownum-1)] + '.jpg"' + 'class="myImg">' + '</img>' +   "</td>");
 }
 document.write("</tr>");


}
document.write('</table>')

这里的任何帮助将非常感谢。

标签： javascripthtmlcss

解决方案

推荐阅读