css - Responsive table with repeating column groups -

-

i have simple 3 column table (second code sample below). of time displayed on wide-screen hd tv, structure first code sample below, , yet depending on width of screen, if it's viewed on smaller screens instead of having 4 repeating columns groups, change 3, 2 1 phones. how can css/media queries?

<table>    <tr>      <th>time</th>      <th>hole</th>      <th>player</th>      <th>time</th>      <th>hole</th>      <th>player</th>      <th>time</th>      <th>hole</th>      <th>player</th>      <th>time</th>      <th>hole</th>      <th>player</th>    </tr>    <tr>      <td>12:06 pm</td>      <td>2</td>      <td>ackerman</td>      <td>11:53 am</td>      <td>3</td>      <td>alexander</td>      <td>12:04 pm</td>      <td>3</td>      <td>allan</td>      <td>02:00 pm</td>      <td>2</td>      <td>allen</td>    </tr>  </table>

<table>          <tr>            <th>time</th>            <th>hole</th>            <th>player</th>          </tr>                      <tr>              <td>12:06 pm</td>              <td>2</td>              <td>ackerman</td>            </tr>                      <tr>              <td>11:53 am</td>              <td>3</td>              <td>alexander</td>            </tr>                      <tr>              <td>12:04 pm</td>              <td>3</td>              <td>allan</td>            </tr>                      <tr>              <td>02:00 pm</td>              <td>2</td>              <td>allen</td>            </tr>                      <tr>              <td>12:03 pm</td>              <td>1</td>              <td>anderson</td>            </tr>                      <tr>              <td>02:49 pm</td>              <td>3</td>              <td>apple</td>            </tr>                      <tr>              <td>02:53 pm</td>              <td>1</td>              <td>campbell</td>            </tr>                      <tr>              <td>02:15 pm</td>              <td>4</td>              <td>deane</td>            </tr>                      <tr>              <td>04:00 pm</td>              <td>1</td>              <td>decker</td>            </tr>                      <tr>              <td>10:31 am</td>              <td>5</td>              <td>esposito</td>            </tr>                      <tr>              <td>02:41 pm</td>              <td>4</td>              <td>estes</td>            </tr>                      <tr>              <td>01:29 pm</td>              <td>2</td>              <td>faidley</td>            </tr>                      <tr>              <td>10:31 am</td>              <td>5</td>              <td>fisher</td>            </tr>                      <tr>              <td>02:16 pm</td>              <td>4</td>              <td>gaus</td>            </tr>                      <tr>              <td>02:15 pm</td>              <td>3</td>              <td>giancola</td>            </tr>                      <tr>              <td>10:31 am</td>              <td>5</td>              <td>gibbons</td>            </tr>                      <tr>              <td>02:13 pm</td>              <td>3</td>              <td>hansen</td>            </tr>                      <tr>              <td>02:51 pm</td>              <td>2</td>              <td>healy</td>            </tr>                      <tr>              <td>02:42 pm</td>              <td>4</td>              <td>kain</td>            </tr>                      <tr>              <td>04:01 pm</td>              <td>2</td>              <td>kestner</td>            </tr>                      <tr>              <td>02:12 pm</td>              <td>3</td>              <td>king</td>            </tr>                      <tr>              <td>11:03 am</td>              <td>2</td>              <td>krieger</td>            </tr>                      <tr>              <td>02:51 pm</td>              <td>3</td>              <td>lee</td>            </tr>                  </table>

ok have updated answer comment there 3 tables next eachother 2 rows of information example...here code , here example site http://codepen.io/anon/pen/enyvoq

    <div class="container-full">   <div class="row">     <div class="col-md-2">       <ul>time</ul>       <ul>12:06 pm</ul>       <ul>11:53 am</ul>     </div>     <div class="col-md-1">       <ul>hole</ul>       <ul>2</ul>       <ul>3</ul>     </div>     <div class="col-md-1">       <ul>player</ul>       <ul>ackerman</ul>       <ul>alexander</ul>     </div>     <div class="col-md-2">       <ul>time</ul>       <ul>12:06 pm</ul>       <ul>11:53 am</ul>     </div>     <div class="col-md-1">       <ul>hole</ul>       <ul>2</ul>       <ul>3</ul>     </div>     <div class="col-md-1">       <ul>player</ul>       <ul>ackerman</ul>       <ul>alexander</ul>     </div>     <div class="col-md-2">       <ul>time</ul>       <ul>12:06 pm</ul>       <ul>11:53 am</ul>     </div>     <div class="col-md-1">       <ul>hole</ul>       <ul>2</ul>       <ul>3</ul>     </div>     <div class="col-md-1">       <ul>player</ul>       <ul>ackerman</ul>       <ul>alexander</ul>     </div>   </div>  </div>

if doesnt answer question comment not matching asking.


Comments

Post a Comment

Popular posts from this blog

c++ - No viable overloaded operator for references a map -

-
i trying use map can make tag names reference number. when try , use it, in code error (6 in total every time reference map): src/main.cpp:25:45: error: no viable overloaded operator[] type 'std::map<std::string, std::string>' const char* idcs = node.child_value(tagmap[3]); this code: #include "pugi/pugixml.hpp" #include <iostream> #include <string> #include <map> int main() { pugi::xml_document doca, docb; std::map<std::string, pugi::xml_node> mapa, mapb; std::map<std::string, std::string> tagmap {{"1", "data"}, {"2", "entry"}, {"3", "id"}, {"4", "content"}}; if (!doca.load_file("a.xml") || !docb.load_file("b.xml")) { std::cout << "can't find input files"; return 1; } (auto& node: doca.child(tagmap[1]).children(tagmap[2])) { co
Read more

java - Custom OutputStreamAppender not run: LOGBACK: No context given for <MYAPPENDER> -

-
i wish write custom appender on basis of outputstreamappender . wrote following class package tests; import java.io.ioexception; import java.io.outputstream; import ch.qos.logback.core.outputstreamappender; public class myappender<e> extends outputstreamappender<e> { public myappender() { system.out.println("myappender created"); setoutputstream(new outputstream() { @override public void write(int b) throws ioexception { throw new unsupportedoperationexception(); } }); } } then wrote following runner: package tests; import org.slf4j.loggerfactory; import ch.qos.logback.classic.logger; public class runner { private static final logger log = (logger) loggerfactory.getlogger(runner.class); public static void main(string[] args) { //log.addappender(new myappender<iloggingevent>()); log.info("hello world"); } } finall
Read more

java - Cannot secure connection using TLS -

-
i'm trying establish secure socket connection between java client applet (built jdk 1.7.0_75-b13) , vc++ server application. as test vehicle, used vc++ client/server sample found in msdn forums, modified use schannel , able establish socket using cipher suite tls_rsa_with_aes_128_cbc_sha. works of tls 1.0/1.1/1.2. when try opening socket java applet same server application, connection rejected server reporting following: tls 1.0 acceptsecuritycontext failed: 0x80090327 tls 1.1 acceptsecuritycontext failed: 0x80090331 tls 1.2 acceptsecuritycontext failed: 0x80090331 this java code used create socket: debugprint("setting secure connection"); sslsocketfactory sslsocketfactory = (sslsocketfactory) sslsocketfactory.getdefault(); sslsocket sslsocket = (sslsocket) sslsocketfactory.createsocket("127.0.0.1", socketnumber); debugprint("starting handshake"); sslsocket.settcpnodelay(true); sslsocket.setsolinger(false, 0); sslsocket.s
Read more