水平溢出不起作用

Question

基本上，我在容器中有一列来显示时间，例如电视指南，并且通过增加小时数（例如13:00至14:00），时间转到了下一行，而不是让我水平滚动，这很难解释它基本上显示了从凌晨5点到下午1点的5个小时的时间，然后转到下一行，而不是继续并允许我水平滚动。我必须像Im复制和粘贴一样在时间上拖动鼠标才能看到下面的时间。 下面是目前的CSS，我已经尝试了每个溢出选项，但没有任何效果。 这就是我要显示的

 <div id = "times">
        <div class = "header">05:00-06:00</div>
        <div class = "header">06:00-07:00</div>
        <div class = "header">07:00-08:00</div>
        <div class = "header">08:00-09:00</div>
        <div class = "header">09:00-10:00</div>
        <div class = "header">11:00-12:00</div>
        <div class = "header">12:00-13:00</div>
        <div class = "header">13:00-14:00</div>
        <div class = "header">14:00-15:00</div>
        <div class = "header">15:00-16:00</div>
        <div class = "header">16:00-17:00</div>
        <div class = "header">17:00-18:00</div>
        <div class = "header">18:00-19:00</div>
        <div class = "header">19:00-20:00</div>
        <div class = "header">20:00-21:00</div>
        <div class = "header">21:00-22:00</div>
        <div class = "header">22:00-23:00</div>
        <div class = "header">23:00-24:00</div>

这是CSS

#times{
    width: 100%;
    height: 50px;
    overflow:scroll;

Answer 1

我提出了这个问题，并予以解决。 下面的代码段应制作带有播放时间的电视指南。 它仍然需要进行大量清理，但是它可以做它需要做的事情。

当我有更多时间并清理更多时间时，我会回到此状态。

我使它尽可能地动态。 您所要做的就是提供一个位置粘贴表格并向其提供数据，因为网格将根据所提供的数据构建。

 /* * Date Format 1.2.3 * (c) 2007-2009 Steven Levithan <stevenlevithan.com> * MIT license * * Includes enhancements by Scott Trenda <scott.trenda.net> * and Kris Kowal <cixar.com/~kris.kowal/> * * Accepts a date, a mask, or a date and a mask. * Returns a formatted version of the given date. * The date defaults to the current date/time. * The mask defaults to dateFormat.masks.default. */ var dateFormat = function () { var token = /d{1,4}|m{1,4}|yy(?:yy)?|([HhMsTt])\\1?|[LloSZ]|"[^"]*"|'[^']*'/g, timezone = /\\b(?:[PMCEA][SDP]T|(?:Pacific|Mountain|Central|Eastern|Atlantic) (?:Standard|Daylight|Prevailing) Time|(?:GMT|UTC)(?:[-+]\\d{4})?)\\b/g, timezoneClip = /[^-+\\dA-Z]/g, pad = function (val, len) { val = String(val); len = len || 2; while (val.length < len) val = "0" + val; return val; }; // Regexes and supporting functions are cached through closure return function (date, mask, utc) { var dF = dateFormat; // You can't provide utc if you skip other args (use the "UTC:" mask prefix) if (arguments.length == 1 && Object.prototype.toString.call(date) == "[object String]" && !/\\d/.test(date)) { mask = date; date = undefined; } // Passing date through Date applies Date.parse, if necessary date = date ? new Date(date) : new Date; if (isNaN(date)) throw SyntaxError("invalid date"); mask = String(dF.masks[mask] || mask || dF.masks["default"]); // Allow setting the utc argument via the mask if (mask.slice(0, 4) == "UTC:") { mask = mask.slice(4); utc = true; } var _ = utc ? "getUTC" : "get", d = date[_ + "Date"](), D = date[_ + "Day"](), m = date[_ + "Month"](), y = date[_ + "FullYear"](), H = date[_ + "Hours"](), M = date[_ + "Minutes"](), s = date[_ + "Seconds"](), L = date[_ + "Milliseconds"](), o = utc ? 0 : date.getTimezoneOffset(), flags = { d: d, dd: pad(d), ddd: dF.i18n.dayNames[D], dddd: dF.i18n.dayNames[D + 7], m: m + 1, mm: pad(m + 1), mmm: dF.i18n.monthNames[m], mmmm: dF.i18n.monthNames[m + 12], yy: String(y).slice(2), yyyy: y, h: H % 12 || 12, hh: pad(H % 12 || 12), H: H, HH: pad(H), M: M, MM: pad(M), s: s, ss: pad(s), l: pad(L, 3), L: pad(L > 99 ? Math.round(L / 10) : L), t: H < 12 ? "a" : "p", tt: H < 12 ? "am" : "pm", T: H < 12 ? "A" : "P", TT: H < 12 ? "AM" : "PM", Z: utc ? "UTC" : (String(date).match(timezone) || [""]).pop().replace(timezoneClip, ""), o: (o > 0 ? "-" : "+") + pad(Math.floor(Math.abs(o) / 60) * 100 + Math.abs(o) % 60, 4), S: ["th", "st", "nd", "rd"][d % 10 > 3 ? 0 : (d % 100 - d % 10 != 10) * d % 10] }; return mask.replace(token, function ($0) { return $0 in flags ? flags[$0] : $0.slice(1, $0.length - 1); }); }; }(); // Some common format strings dateFormat.masks = { "default": "ddd mmm dd yyyy HH:MM:ss", shortDate: "m/d/yy", mediumDate: "mmm d, yyyy", longDate: "mmmm d, yyyy", fullDate: "dddd, mmmm d, yyyy", shortTime: "h:MM TT", mediumTime: "h:MM:ss TT", longTime: "h:MM:ss TT Z", isoDate: "yyyy-mm-dd", isoTime: "HH:MM:ss", isoDateTime: "yyyy-mm-dd'T'HH:MM:ss", isoUtcDateTime: "UTC:yyyy-mm-dd'T'HH:MM:ss'Z'" }; // Internationalization strings dateFormat.i18n = { dayNames: [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ], monthNames: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ] }; // For convenience... Date.prototype.format = function (mask, utc) { return dateFormat(this, mask, utc); }; var utcDate = function (year, month, day, hour, min, sec) { return new Date(Date.UTC(year, month, day, hour, min, sec)); }; var frmt = function(date) { return date.format('shortTime'); }; var data = [{ name: 'CNN', shows: [{ title: 'News', startDate: utcDate(2014, 11, 17, 15, 0, 0), endDate: utcDate(2014, 11, 17, 16, 0, 0) }, { title: 'More News', startDate: utcDate(2014, 11, 17, 16, 0, 0), endDate: utcDate(2014, 11, 17, 18, 0, 0) }] }, { name: 'ESPN', shows: [{ title: 'Sports', startDate: utcDate(2014, 11, 17, 15, 0, 0), endDate: utcDate(2014, 11, 17, 16, 0, 0) }, { title: 'More Sports', startDate: utcDate(2014, 11, 17, 16, 0, 0), endDate: utcDate(2014, 11, 17, 17, 0, 0) }] }, { name: 'TBS', shows: [{ title: 'Comedy', startDate: utcDate(2014, 11, 17, 15, 0, 0), endDate: utcDate(2014, 11, 17, 15, 30, 0) }, { title: 'More Comedy', startDate: utcDate(2014, 11, 17, 15, 30, 0), endDate: utcDate(2014, 11, 17, 16, 0, 0) }, { title: 'Even More Comedy', startDate: utcDate(2014, 11, 17, 16, 0, 0), endDate: utcDate(2014, 11, 17, 16, 30, 0) }, { title: 'Too Much Comedy', startDate: utcDate(2014, 11, 17, 16, 30, 0), endDate: utcDate(2014, 11, 17, 17, 30, 0) }] }] $(document).ready(function () { var guide = $('#guide'); var generateMetadata = function (guide, data) { var calcStartDate = function (date, showDate) { return date === undefined || date.getTime() > showDate.getTime() ? showDate : date; }; var calcEndDate = function (date, showDate) { return date === undefined || date.getTime() < showDate.getTime() ? showDate : date; }; // Needs work... var calcMinStep = function (step, show) { var start = show.startDate.getMinutes(); var end = show.endDate.getMinutes(); var min = start < end ? start : end; return step === undefined || step > min && min !== 0 ? min : step; }; var startDate = undefined; var endDate = undefined; var minStep = 60; var channelCount = 0; $.each(data, function (cIdx, channel) { $.each(channel.shows, function (sIdx, show) { startDate = calcStartDate(startDate, show.startDate); endDate = calcEndDate(endDate, show.endDate); minStep = calcMinStep(minStep, show); // Needs work... }); channelCount++; }); return { startDate: startDate, endDate: endDate, step: minStep * 60000, channelCount : channelCount }; }; var generateBlocks = function(metaData) { var blocks = []; var currDate = new Date(); currDate.setTime(metaData.startDate.getTime()); while (currDate.getTime() < metaData.endDate.getTime()) { var currBlock = {}; currBlock.startDate = frmt(currDate); currDate.setTime(currDate.getTime() + metaData.step); currBlock.endDate = frmt(currDate); blocks.push(currBlock); } return blocks; }; var calcDuration = function(show, step) { var start = show.startDate.getTime(); var end = show.endDate.getTime(); return (end - start) / step; }; var createTable = function (guide, data) { var metaData = generateMetadata(guide, data); var blocks = generateBlocks(metaData); console.log(blocks); var table = $('<table>'); var thead = $('<thead>').appendTo(table); var theadr = $('<tr>').appendTo(thead); var tbody = $('<tbody>').appendTo(table); theadr.append($('<td>').html('')); for (var i = 0; i < blocks.length; i++) { theadr.append($('<td>').html(blocks[i].startDate)); } $.each(data, function (cIdx, channel) { var tbodyr = $('<tr>').appendTo(tbody); console.log(channel.name); tbodyr.append($('<td>').html(channel.name)); $.each(channel.shows, function (sIdx, show) { var duration = calcDuration(show, metaData.step); tbodyr.append($('<td>').attr('colspan', duration).html(show.title)); }); }); console.log(JSON.stringify(metaData, undefined, ' ')); guide.append(table); }; createTable(guide, data); }); 

 .scroll { width: auto; max-width: 200px; overflow-x: scroll; white-space: nowrap; } td, th, table { border: solid 1px #000; border-collapse: collapse; padding: 5px; padding-left: 10px; padding-right: 10px; text-align: center; } thead { border-bottom: double 3px #000; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="scroll" id="guide"></div>