我正在构建一个HTML表，该表显示MySQL数据库中的信息，并具有更新或删除数据库中行的功能。
这是我的代码：
<table>
<tr>
<th>Name</th>
<th>Email</th>
<th>Program</th>
<th>Class</th>
<th>Start Date</th>
<th>End Date</th>
<th>Country</th>
</tr>
<?php
$db = JFactory::getDBO();
$query = "SELECT * FROM student_management_module";
$db->setQuery($query);
$rows = $db->loadObjectList();
foreach ($rows as &$row) {
echo "<form action=index.php/component/studentmanagement/?task=update method=post>";
echo "<tr>";
echo "<td>" . "<input type=text name=fname id=name_val value=" .$row->name. " </td>";
echo "<td>" . "<input type=text name=email id=email_val value=" .$row->email. " </td>";
echo "<td>" . "<input type=text name=prog id=prog_val value=" .$row->program. " </td>";
echo "<td>" . "<input type=text name=class id=class_val value=" .$row->class. " </td>";
echo "<td>" . "<input type=text name=sdate id=start_val value=" .$row->start_date. " </td>";
echo "<td>" . "<input type=text name=edate id=end_val value=" .$row->end_date. " </td>";
echo "<td>" . "<input type=text name=country id=country_val value=" .$row->country. " </td>";
echo "<td>" . "<input type=hidden name=hidden value=" .$row->student_id. " </td>";
echo "<td>" . "<input type=submit name=update value=update". " </td>";
echo "<td>" . "<input type=submit name=delete value=delete". " </td>";
echo "</tr>";
echo "</form>";
}
?>
这是表格的当前外观：
但是有太多列无法容纳在我想要的空间中。
如何在底部创建一个水平滚动条，并确保将更新和删除按钮与该滚动条分开，以便更新和插入按钮始终显示在右侧。
我尝试了CSS溢出属性，但是它在滚动中包括插入和删除。
任何帮助将不胜感激，并在此先感谢。
答案 0 :(得分：1)
首先，您忘了关闭input标签：
echo "<td>" . "<input type=text name=fname id=name_val value=" .$row->name. "> </td>";
//-----------------------------------------------------------Here------------^
其次，您在标记中忘记了''：
echo "<td>" . "<input type='text' name='fname' id='name_val' value='" .$row->name. "'> </td>";
第三次，如果您希望水平滚动条，则应显示以下内容：
html{
max-width: 100%;
overflow-x: hidden;
}
.headcol {
position: absolute;
width: 120px;
left: 0;
top: auto;
border-top-width: 1px;
/*only relevant for first row*/
margin-top: -1px;
/*compensate for top border*/
}
.div {
width: 86%;
overflow-x: scroll;
margin-left: 5em;
overflow-y: visible;
padding: 0;
} <html>
<div class="div">
<table style="width: 100%; overflow-x: auto">
<tr>
<th></th>
<th>Name</th>
<th>Email</th>
<th>Program</th>
<th>Class</th>
<th>Student ID</th>
<th>Start Date</th>
<th>End Date</th>
<th>Country</th>
</tr>
<tr>
<form>
<td class="headcol"><input type="submit" name="update" value="update"><input type="submit" name="delete" value="delete"></td>
<td><input type="text" name="fname" id="name_val" value=" .$row->name. "></td>
<td><input type="text" name="fname" id="name_val" value=" .$row->mail. "></td>
<td><input type="text" name="fname" id="name_val" value=" .$row->Program. "></td>
<td><input type="text" name="fname" id="name_val" value=" .$row->Class. "></td>
<td><input type="text" name="fname" id="name_val" value=" .$row->StudentID. "></td>
<td><input type="text" name="fname" id="name_val" value=" .$row->StartDate. "></td>
<td><input type="text" name="fname" id="name_val" value=" .$row->EndDate. "></td>
<td><input type="text" name="fname" id="name_val" value=" .$row->Country. "></td>
</form>
</tr>
<tr>
<form>
<td class="headcol"><input type="submit" name="update" value="update"><input type="submit" name="delete" value="delete"></td>
<td><input type="text" name="fname" id="name_val" value=" .$row->name. "></td>
<td><input type="text" name="fname" id="name_val" value=" .$row->mail. "></td>
<td><input type="text" name="fname" id="name_val" value=" .$row->Program. "></td>
<td><input type="text" name="fname" id="name_val" value=" .$row->Class. "></td>
<td><input type="text" name="fname" id="name_val" value=" .$row->StudentID. "></td>
<td><input type="text" name="fname" id="name_val" value=" .$row->StartDate. "></td>
<td><input type="text" name="fname" id="name_val" value=" .$row->EndDate. "></td>
<td><input type="text" name="fname" id="name_val" value=" .$row->Country. "></td>
</form>
</tr>
<tr>
<form>
<td class="headcol"><input type="submit" name="update" value="update"><input type="submit" name="delete" value="delete"></td>
<td><input type="text" name="fname" id="name_val" value=" .$row->name. "></td>
<td><input type="text" name="fname" id="name_val" value=" .$row->mail. "></td>
<td><input type="text" name="fname" id="name_val" value=" .$row->Program. "></td>
<td><input type="text" name="fname" id="name_val" value=" .$row->Class. "></td>
<td><input type="text" name="fname" id="name_val" value=" .$row->StudentID. "></td>
<td><input type="text" name="fname" id="name_val" value=" .$row->StartDate. "></td>
<td><input type="text" name="fname" id="name_val" value=" .$row->EndDate. "></td>
<td><input type="text" name="fname" id="name_val" value=" .$row->Country. "></td>
</form>
</tr>
<tr>
<form>
<td class="headcol"><input type="submit" name="update" value="update"><input type="submit" name="delete" value="delete"></td>
<td><input type="text" name="fname" id="name_val" value=" .$row->name. "></td>
<td><input type="text" name="fname" id="name_val" value=" .$row->mail. "></td>
<td><input type="text" name="fname" id="name_val" value=" .$row->Program. "></td>
<td><input type="text" name="fname" id="name_val" value=" .$row->Class. "></td>
<td><input type="text" name="fname" id="name_val" value=" .$row->StudentID. "></td>
<td><input type="text" name="fname" id="name_val" value=" .$row->StartDate. "></td>
<td><input type="text" name="fname" id="name_val" value=" .$row->EndDate. "></td>
<td><input type="text" name="fname" id="name_val" value=" .$row->Country. "></td>
</form>
</tr>
<tr>
<form>
<td class="headcol"><input type="submit" name="update" value="update"><input type="submit" name="delete" value="delete"></td>
<td><input type="text" name="fname" id="name_val" value=" .$row->name. "></td>
<td><input type="text" name="fname" id="name_val" value=" .$row->mail. "></td>
<td><input type="text" name="fname" id="name_val" value=" .$row->Program. "></td>
<td><input type="text" name="fname" id="name_val" value=" .$row->Class. "></td>
<td><input type="text" name="fname" id="name_val" value=" .$row->StudentID. "></td>
<td><input type="text" name="fname" id="name_val" value=" .$row->StartDate. "></td>
<td><input type="text" name="fname" id="name_val" value=" .$row->EndDate. "></td>
<td><input type="text" name="fname" id="name_val" value=" .$row->Country. "></td>
</form>
</tr>
<tr>
<form>
<td class="headcol"><input type="submit" name="update" value="update"><input type="submit" name="delete" value="delete"></td>
<td><input type="text" name="fname" id="name_val" value=" .$row->name. "></td>
<td><input type="text" name="fname" id="name_val" value=" .$row->mail. "></td>
<td><input type="text" name="fname" id="name_val" value=" .$row->Program. "></td>
<td><input type="text" name="fname" id="name_val" value=" .$row->Class. "></td>
<td><input type="text" name="fname" id="name_val" value=" .$row->StudentID. "></td>
<td><input type="text" name="fname" id="name_val" value=" .$row->StartDate. "></td>
<td><input type="text" name="fname" id="name_val" value=" .$row->EndDate. "></td>
<td><input type="text" name="fname" id="name_val" value=" .$row->Country. "></td>
</form>
</tr>
<tr>
<form>
<td class="headcol"><input type="submit" name="update" value="update"><input type="submit" name="delete" value="delete"></td>
<td><input type="text" name="fname" id="name_val" value=" .$row->name. "></td>
<td><input type="text" name="fname" id="name_val" value=" .$row->mail. "></td>
<td><input type="text" name="fname" id="name_val" value=" .$row->Program. "></td>
<td><input type="text" name="fname" id="name_val" value=" .$row->Class. "></td>
<td><input type="text" name="fname" id="name_val" value=" .$row->StudentID. "></td>
<td><input type="text" name="fname" id="name_val" value=" .$row->StartDate. "></td>
<td><input type="text" name="fname" id="name_val" value=" .$row->EndDate. "></td>
<td><input type="text" name="fname" id="name_val" value=" .$row->Country. "></td>
</form>
</tr>
</table>
</div>
</html>
答案 1 :(得分：-2)
请解释一下……在第二遍看这个答案（也许再读一次问题）之前，以及在您理解了这个答案是关于...之后，不要告诉我这是关于pHp的。 1}}和HTML标签
您的代码充满了错误（结束标记，无效的结构..）。这个官方的在线工具可以帮助您发现错误：https://validator.w3.org/
您可以使用该表单包装整个表格，它将提供有效的HTML结构并创建滚动条。
更新和删除按钮可以包装在单个单元格中，因此您必须注意单个单元格。
CSS现在建议CSS（以及旧版浏览器的javascript polyfills）
看看https://css-tricks.com/position-sticky-2/和https://css-tricks.com/stickybits-alternative-position-sticky-polyfills/
严格定位是相对定位和固定定位的混合体。将该元素视为相对位置，直到它超过指定的阈值为止，此时将其视为固定位置。
您可以做什么的示例：
position:stickyform {
max-width:100%;
margin: auto;
overflow: auto;
}
form table tr td:last-child {
position: sticky;
right: 0;
white-space: nowrap;
background:lightblue;
}
使用polyfill的想法，在浏览器仍需要javascript的情况下
<form><!-- use the form as the wrapper to scroll -->
<table>
<tr>
<th>Name</th>
<th>Email</th>
<th>Program</th>
<th>Class</th>
<th>Student ID</th>
<th>Start Date</th>
<th>End Date</th>
<th>Country</th>
<th colspan=5></th><!-- html update numbers of column must be equal on each rows -->
</tr>
<!-- below your rendered HTML cleaned up from the php useless in snippet to demonstrate the CSS DEMO about sticky -->
<tr>
<td><input type=text name=fname id=name_val value="name"><!-- html update closing tag on input --></td>
<td><input type=text name=email id=email_val value="email. "></td>
<td><input type=text name=prog id=prog_val value="program. "></td>
<td><input type=text name=class id=class_val value=">class. "></td>
<td><input type=text name=sdate id=start_val value="start_date. "></td>
<td><input type=text name=edate id=end_val value="end_date. "></td>
<td><input type=text name=stdid id=stdid_val value="student_id. "></td>
<td><input type=text name=stdid id=stdid_val value="student_id. "></td>
<td><input type=text name=stdid id=stdid_val value="student_id. "></td>
<td><input type=text name=stdid id=stdid_val value="student_id. "></td>
<td><input type=text name=stdid id=stdid_val value="student_id. "></td>
<td><input type=hidden name=hidden value="student_id. "></td>
<td><input type=submit name=update value="update"> <input type=submit name=delete value="delete"><!-- html update both button in a single cell --> </td>
</tr>
<tr>
<td><input type=text name=fname id=name_val value="name"><!-- html update closing tag on input --></td>
<td><input type=text name=email id=email_val value="email. "></td>
<td><input type=text name=prog id=prog_val value="program. "></td>
<td><input type=text name=class id=class_val value=">class. "></td>
<td><input type=text name=sdate id=start_val value="start_date. "></td>
<td><input type=text name=edate id=end_val value="end_date. "></td>
<td><input type=text name=stdid id=stdid_val value="student_id. "></td>
<td><input type=text name=stdid id=stdid_val value="student_id. "></td>
<td><input type=text name=stdid id=stdid_val value="student_id. "></td>
<td><input type=text name=stdid id=stdid_val value="student_id. "></td>
<td><input type=text name=stdid id=stdid_val value="student_id. "></td>
<td><input type=hidden name=hidden value="student_id. "></td>
<td><input type=submit name=update value="update"> <input type=submit name=delete value="delete"><!-- html update both button in a single cell --> </td>
</tr>
<tr>
<td><input type=text name=fname id=name_val value="name"><!-- html update closing tag on input --></td>
<td><input type=text name=email id=email_val value="email. "></td>
<td><input type=text name=prog id=prog_val value="program. "></td>
<td><input type=text name=class id=class_val value=">class. "></td>
<td><input type=text name=sdate id=start_val value="start_date. "></td>
<td><input type=text name=edate id=end_val value="end_date. "></td>
<td><input type=text name=stdid id=stdid_val value="student_id. "></td>
<td><input type=text name=stdid id=stdid_val value="student_id. "></td>
<td><input type=text name=stdid id=stdid_val value="student_id. "></td>
<td><input type=text name=stdid id=stdid_val value="student_id. "></td>
<td><input type=text name=stdid id=stdid_val value="student_id. "></td>
<td><input type=hidden name=hidden value="student_id. "></td>
<td><input type=submit name=update value="update"> <input type=submit name=delete value="delete"><!-- html update both button in a single cell --> </td>
</tr>
<tr>
<td><input type=text name=fname id=name_val value="name"><!-- html update closing tag on input --></td>
<td><input type=text name=email id=email_val value="email. "></td>
<td><input type=text name=prog id=prog_val value="program. "></td>
<td><input type=text name=class id=class_val value=">class. "></td>
<td><input type=text name=sdate id=start_val value="start_date. "></td>
<td><input type=text name=edate id=end_val value="end_date. "></td>
<td><input type=text name=stdid id=stdid_val value="student_id. "></td>
<td><input type=text name=stdid id=stdid_val value="student_id. "></td>
<td><input type=text name=stdid id=stdid_val value="student_id. "></td>
<td><input type=text name=stdid id=stdid_val value="student_id. "></td>
<td><input type=text name=stdid id=stdid_val value="student_id. "></td>
<td><input type=hidden name=hidden value="student_id. "></td>
<td><input type=submit name=update value="update"> <input type=submit name=delete value="delete"><!-- html update both button in a single cell --> </td>
</tr>
<tr>
<td><input type=text name=fname id=name_val value="name"><!-- html update closing tag on input --></td>
<td><input type=text name=email id=email_val value="email. "></td>
<td><input type=text name=prog id=prog_val value="program. "></td>
<td><input type=text name=class id=class_val value=">class. "></td>
<td><input type=text name=sdate id=start_val value="start_date. "></td>
<td><input type=text name=edate id=end_val value="end_date. "></td>
<td><input type=text name=stdid id=stdid_val value="student_id. "></td>
<td><input type=text name=stdid id=stdid_val value="student_id. "></td>
<td><input type=text name=stdid id=stdid_val value="student_id. "></td>
<td><input type=text name=stdid id=stdid_val value="student_id. "></td>
<td><input type=text name=stdid id=stdid_val value="student_id. "></td>
<td><input type=hidden name=hidden value="student_id. "></td>
<td><input type=submit name=update value="update"> <input type=submit name=delete value="delete"><!-- html update both button in a single cell --> </td>
</tr>
</table>
</form>// https://dollarshaveclub.github.io/stickybits/
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global.stickybits = factory());
}(this, (function () { 'use strict';
var browserPrefix = ['', '-o-', '-webkit-', '-moz-', '-ms-'];
var stickyBitClass = 'js-is-sticky';
var stickyBitIsStuckClass = 'js-is-stuck';
function Stickybit(target, o) {
this.el = target;
this.scrollTarget = o && o.scrollTarget || window;
this.stickyBitStickyOffset = o && o.stickyBitStickyOffset || 0;
this.verticalPosition = o && o.verticalPosition || 'top';
this.useStickyClasses = o && o.useStickyClasses || false;
this.elStyle = this.el.style;
this.positionStickyVal = 'fixed';
}
Stickybit.prototype.setStickyPosition = function setStickyPosition() {
var elStyle = this.elStyle;
var verticalPosition = this.verticalPosition;
for (var i = 0; i < browserPrefix.length; i += 1) {
elStyle.position = browserPrefix[i] + 'sticky';
}
if (elStyle.position !== '') {
this.positionStickyVal = elStyle.position;
if (verticalPosition === 'top') {
elStyle[verticalPosition] = this.stickyBitStickyOffset + 'px';
}
}
};
Stickybit.prototype.manageStickiness = function manageStickiness() {
var el = this.el;
var scrollTarget = this.scrollTarget;
var positionStickyVal = this.positionStickyVal;
var verticalPosition = this.verticalPosition;
var stickyBitStickyOffset = this.stickyBitStickyOffset;
var elStyle = this.elStyle;
var elClasses = el.classList;
var elParent = el.parentNode;
var stickyBitStart = el.getBoundingClientRect().top;
var stickyBitStop = stickyBitStart + elParent.offsetHeight - (el.offsetHeight - stickyBitStickyOffset);
elParent.classList.add('js-stickybit-parent');
function stickiness() {
var scroll = scrollTarget.scrollY;
if (scroll < stickyBitStart) {
if (elClasses.contains(stickyBitClass)) {
elClasses.remove(stickyBitClass);
if (positionStickyVal === 'fixed') elStyle.position = '';
}
} else if (scroll > stickyBitStart && scroll < stickyBitStop) {
if (!elClasses.contains(stickyBitClass)) elClasses.add(stickyBitClass);
if (elClasses.contains(stickyBitIsStuckClass)) {
elClasses.remove(stickyBitIsStuckClass);
elStyle.bottom = '';
}
elStyle.position = positionStickyVal;
elStyle[verticalPosition] = stickyBitStickyOffset + 'px';
} else if (scroll > stickyBitStop && !elClasses.contains(stickyBitIsStuckClass)) {
elClasses.remove(stickyBitClass);
elClasses.add(stickyBitIsStuckClass);
if (positionStickyVal !== 'fixed') return;
elStyle.top = '';
elStyle.bottom = '0';
elStyle.position = 'absolute';
}
}
var invoked = void 0;
function checkStickiness() {
if (invoked) return;
invoked = true;
stickiness();
window.setTimeout(function () {
invoked = false;
}, 0);
}
scrollTarget.addEventListener('scroll', function () {
return scrollTarget.requestAnimationFrame(checkStickiness);
});
};
function stickybits(target, o) {
var els = typeof target === 'string' ? document.querySelectorAll(target) : target;
if (!('length' in els)) els = [els];
var stickyBit = void 0;
for (var i = 0; i < els.length; i += 1) {
var el = els[i];
stickyBit = new Stickybit(el, o);
stickyBit.setStickyPosition();
if (stickyBit.positionStickyVal === 'fixed' || stickyBit.useStickyClasses === true) {
stickyBit.manageStickiness();
}
}
}
return stickybits;
})));
var $fixedEl = $('#fixed-child');
var $fixedParent = $('#fixed-parent');
var stickyCoords = {};
function getStickyCoords() {
stickyCoords.start = $fixedParent.offset().top;
var parentHeight = $fixedParent.outerHeight();
var fixedElHeight = $fixedEl.outerHeight();
var distance = parentHeight - fixedElHeight;
stickyCoords.stop = stickyCoords.start + distance;
return stickyCoords;
};
$(window).on('scroll', function() {
var scroll = window.scrollY;
getStickyCoords();
if (scroll < stickyCoords.start) {
$fixedEl.removeClass('js-is-fixed');
return;
} else if (
(scroll > stickyCoords.start) &&
(scroll < stickyCoords.stop)
) {
$fixedEl.addClass('js-is-fixed');
$fixedEl.removeClass('js-is-fixed-stuck');
return;
} else {
$fixedEl.addClass('js-is-fixed-stuck');
$fixedEl.removeClass('js-is-fixed');
}
});
stickybits('#sticky-child');form {
max-width:100%;
margin: auto;
overflow: auto;
}
form table tr td:last-child {
position: sticky;
right: 0;
white-space: nowrap;
background:lightblue;
}