问:
making a table using div in HTML
I want to make a table like this by using DIV in html & CSSdesired result
but I am having a table like this gained result
I tried but could not get the desired result. where I need to change my code? can anyone help me regarding this?

.tableMain {
  display: table;
  width: 100%;
  background-color: black;
}

.tableRow {
  display: table-row;
  color: aqua;
}

.tableCell,
.tableHead {
  border: 1px solid aqua;
  display: table-cell;
  padding-left: 5px;
}

.tableHeading {
  display: table-header-group;
  font-weight: bold;
}

.tableBody {
  display: table-row-group;
}```
<pre class="snippet-code-html lang-html prettyprint-override"><code><div class="tableMain">
  <div class="tableBody">
    <div class="tableRow">
      <div class="tableCell">
        <h2>Header-1</h2>
      </div>
      <div class="tableCell">
        <h2>Header-2</h2>
      </div>
    </div>
    <div class="tableRow">
      <div class="tableCell">
        <h2>Section-1</h2>
      </div>
      <div class="tableCell">
        <h3>Title</h3>
        <h4>Description</h4>
        <ul>
          <li>item-1</li>
          <li>item-2</li>
          <li>item-3</li>
        </ul>
      </div>
    </div>
    <div class="tableRow">
      <div class="tableCell">
        <h2>Section-2</h2>
      </div>
    </div>
    <div class="tableRow">
      <div class="tableCell">
        <h2>header-1</h2>
      </div>
      <div class="tableCell">
        <h2>header-2</h2>
      </div>
      <div class="tableCell">
        <h2>header-3</h2>
      </div>
    </div>
    <div class="tableRow">
      <div class="tableCell">
        <p>A</p>
      </div>
      <div class="TableCell">
        <p>B</p>
      </div>
      <div class="tableCell">
        <p>C</p>
      </div>
    </div>
    <div class="tableRow">
      <div class="tableCell">
        <p>A</p>
      </div>
      <div class="tableCell">
        <p>B</p>
      </div>
      <div class="tableCell">
        <p>C</p>
      </div>
    </div>
    <div class="tableRow">
      <div class="tableCell">
        <p>A</p>
      </div>
      <div class="tableCell">
        <p>B</p>
      </div>
      <div class="tableCell">
        <p>C</p>
      </div>
    </div>
  </div>
</div></code>```

答:
Your HTML structure has a few errors..
You see.. the last cell has a whole table in it and so should your HTML structure have a whole table inside the last cell like this:

.tableMain {
  display: table;
  width: 100%;
  background-color: black;
}

.tableRow {
  display: table-row;
  color: aqua;
}

.tableCell,
.tableHead {
  border: 1px solid aqua;
  display: table-cell;
  padding-left: 5px;
}

.tableHeading {
  display: table-header-group;
  font-weight: bold;
}

.tableBody {
  display: table-row-group;
}

.body {
  margin: 0px;
}```
<pre class="snippet-code-html lang-html prettyprint-override"><code><div class="tableMain">
  <div class="tableBody">
    <div class="tableRow">
      <div class="tableCell">
        <h2>Header-1</h2>
      </div>
      <div class="tableCell">
        <h2>Header-2</h2>
      </div>
    </div>
    <div class="tableRow">
      <div class="tableCell">
        <h2>Section-1</h2>
      </div>
      <div class="tableCell">
        <h3>Title</h3>
        <h4>Description</h4>
        <ul>
          <li>item-1</li>
          <li>item-2</li>
          <li>item-3</li>
        </ul>
      </div>
    </div>
    <div class="tableRow">
      <div class="tableCell">
        <h2>Section-2</h2>
      </div>
      <div class="tableRow">
        <div class="tableMain">
          <div class="tableBody">
            <div class="tableRow">
              <div class="tableCell">
                <h2>header-1</h2>
              </div>
              <div class="tableCell">
                <h2>header-2</h2>
              </div>
              <div class="tableCell">
                <h2>header-3</h2>
              </div>
            </div>
            <div class="tableRow">
              <div class="tableCell">
                <p>A</p>
              </div>
              <div class="TableCell">
                <p>B</p>
              </div>
              <div class="tableCell">
                <p>C</p>
              </div>
            </div>
            <div class="tableRow">
              <div class="tableCell">
                <p>A</p>
              </div>
              <div class="tableCell">
                <p>B</p>
              </div>
              <div class="tableCell">
                <p>C</p>
              </div>
            </div>
            <div class="tableRow">
              <div class="tableCell">
                <p>A</p>
              </div>
              <div class="tableCell">
                <p>B</p>
              </div>
              <div class="tableCell">
                <p>C</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</div></code>```

Title: making a table using div in HTML

Body:
I want to make a table like this by using DIV in html & CSSdesired result
but I am having a table like this gained result
I tried but could not get the desired result. where I need to change my code? can anyone help me regarding this?

.tableMain {
  display: table;
  width: 100%;
  background-color: black;
}

.tableRow {
  display: table-row;
  color: aqua;
}

.tableCell,
.tableHead {
  border: 1px solid aqua;
  display: table-cell;
  padding-left: 5px;
}

.tableHeading {
  display: table-header-group;
  font-weight: bold;
}

.tableBody {
  display: table-row-group;
}

Header-1

Header-2

Section-1

Title

Description

item-1

item-2

item-3

Section-2

header-1

header-2

header-3

A

B

C

A

B

C

A

B

C

Body:
Your HTML structure has a few errors..
You see.. the last cell has a whole table in it and so should your HTML structure have a whole table inside the last cell like this:

.tableMain {
  display: table;
  width: 100%;
  background-color: black;
}

.tableRow {
  display: table-row;
  color: aqua;
}

.tableCell,
.tableHead {
  border: 1px solid aqua;
  display: table-cell;
  padding-left: 5px;
}

.tableHeading {
  display: table-header-group;
  font-weight: bold;
}

.tableBody {
  display: table-row-group;
}

.body {
  margin: 0px;
}

<div class="tableMain">
  <div class="tableBody">
    <div class="tableRow">
      <div class="tableCell">
        <h2>Header-1</h2>
      </div>
      <div class="tableCell">
        <h2>Header-2</h2>
      </div>
    </div>
    <div class="tableRow">
      <div class="tableCell">
        <h2>Section-1</h2>
      </div>
      <div class="tableCell">
        <h3>Title</h3>
        <h4>Description</h4>
        <ul>
          <li>item-1</li>
          <li>item-2</li>
          <li>item-3</li>
        </ul>
      </div>
    </div>
    <div class="tableRow">
      <div class="tableCell">
        <h2>Section-2</h2>
      </div>
      <div class="tableRow">
        <div class="tableMain">
          <div class="tableBody">
            <div class="tableRow">
              <div class="tableCell">
                <h2>header-1</h2>
              </div>
              <div class="tableCell">
                <h2>header-2</h2>
              </div>
              <div class="tableCell">
                <h2>header-3</h2>
              </div>
            </div>
            <div class="tableRow">
              <div class="tableCell">
                <p>A</p>
              </div>
              <div class="TableCell">
                <p>B</p>
              </div>
              <div class="tableCell">
                <p>C</p>
              </div>
            </div>
            <div class="tableRow">
              <div class="tableCell">
                <p>A</p>
              </div>
              <div class="tableCell">
                <p>B</p>
              </div>
              <div class="tableCell">
                <p>C</p>
              </div>
            </div>
            <div class="tableRow">
              <div class="tableCell">
                <p>A</p>
              </div>
              <div class="tableCell">
                <p>B</p>
              </div>
              <div class="tableCell">
                <p>C</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>


来源: stackexchange

问:
a large scale java project solution
I would like to start up a project from scratch. I am a java developer for years. I did even write my own mvc framework some time ago for fun. Now I am working in a company using in-house framework - which i think is a total loss of time and money. I respect the idea of  teaming up with different skilled people for a large scale project. The separation of the project is very important; Graphics guys, front end developers, software architectures, software developers, database experts, etc. I cannot risk to use a scripting language like php.

Lately, I am researching java technologies for a large scale project in every aspects. What I mean by that, for the front layer I come across with very famous technologies.

Spring

MyFaces

Tapestry

Google Web Toolkit

Cocoon

Velocity

Every one of them states that it is the simplest, the fastest, the latest technology and whatsoever. Of course only one them can hold the truth. I need a front end technology for fast implementation for ajax, customer/administrator security, themes, templates, internationalization, caching static pages, clustering and a support of ejb. It should also have IDE support, community support, rich documentation and online tutorials. Still I have no experience of those frameworks which to choose from. Maybe there is even better one? And most importantly, I cannot risk to start up on a technology which has development limitations. Is there any suggestions for this layer?

For the business layer, I am sure of EJB and JPA. I do even considering a web service for facade of this layer for interoperability purposes for future extensions. However, I have no idea about securing that layer (it could be applied on its web service level) which is still a problem for me. For the application server I am considering GlassFish.

And for the last question is what IDE should be picked for development. Regarding all the technologies, which are going to be used, an IDE should help me in every step, either doing the configuration for me or helping me configuring with its ready wizards. I suppose the IDE will have proper plugins for to be used technologies.

I know that I want too much, however I have a hope for a combination of technologies which will help me saving time and money in my future plans.

I ll be really glad to hear your responses, experiences for a bigger picture.

edited: There is no ultimate answer, I know that. I am just taking advice. Any answer is appreciated.

答:
Given how the other answers look, I would say the biggest remaining factor is the learning curve for you and your team. Given your description of the separation of roles, your primary concern should be picking an overarching framework, such as Spring. From there, your database guys can pick whatever they want for data persistence (hibernate, jdbc, whatever) and your gui guys can pick whatever they want for their front-end (tapestry, jsf, etc.).

The primary concern I would have with such a distinct separation of roles would be the communication on the team. Make sure that their is a high degree of open communication, especially when discussing interface design, as those will be integral in the success or failure of your project (especially if you pick Spring).

As far as IDEs go, it's personal preference. The two mentioned in the other posts (Eclipse and IntelliJ) are the two I hear the most about, with Eclipse being my standard IDE for the last 4 or 5 years. I'm not familiar with IntelliJ, but I know that Eclipse has plug-ins to support Spring, Hibernate, and a host of other frameworks and ORM solutions. It also has plug-ins to support other languages as well, such as Ruby and PHP.

ContentLicense: CC BY-SA 2.5

Title: a large scale java project solution


问:
Error in deleting a dynamic object?
I am allocating a memory for union in heap and i need to delete the object of union when the element Id of union is 900.

Please help me to delete groupUnion[i] object when the Id is 900
below is my code.

```<code>groupUnion = (SettingsUnion *) malloc(sizeof(SettingsUnion) * (NumAttrs + 1));
if(groupUnion == (SettingsUnion *) NULL)
{
    return (FALSE);
}

for (unsigned int i=0; i < NumAttrs; i++)
{
    inFile.read(reinterpret_cast<char*>(&groupUnion[i]),sizeof(SettingsUnion));
    if(groupUnion[i].Id == 900)
    {
        free groupUnion[i]; // this is bad how can i delete groupUnion[i] when groupUnion[i].Id == 900
        groupUnion[i] = NULL;
    }
}

inFile.close()
</code>```

Thanks in Advance!!

答:
You cannot free part of the allocated memory: free groupUnion[i]

What you can do however is to allocate individually the elements and then free them individually:

```<code>// not sure why you need the +1 (anyway you allocate an array of pointers to the struct here. Consider using new operator)
groupUnion = (SettingsUnion **) malloc(sizeof(SettingsUnion *) * (NumAttrs + 1));
if(groupUnion == (SettingsUnion *) NULL)
{
    return (FALSE);
}

for (unsigned int i=0; i < NumAttrs; i++)
{
    // you allocate the individual groupUnion here:
    groupUnion[i] = (SettingsUnion *) malloc(sizeof(SettingsUnion));
    if(groupUnion[i] == (SettingsUnion *) NULL)
    {
        return (FALSE);
    }

    inFile.read(reinterpret_cast<char*>(&groupUnion[i]),sizeof(SettingsUnion));
   if(groupUnion[i].Id == 900)
   {
        free groupUnion[i]; // this is bad how can i delete groupUnion[i] when groupUnion[i].Id == 900
        groupUnion[i] = NULL;
   }
}

inFile.close()
</code>```

ContentLicense: CC BY-SA 3.0

Title: Error in deleting a dynamic object?

Body:
I am allocating a memory for union in heap and i need to delete the object of union when the element Id of union is 900.

Please help me to delete groupUnion[i] object when the Id is 900
below is my code.

groupUnion = (SettingsUnion *) malloc(sizeof(SettingsUnion) * (NumAttrs + 1));
if(groupUnion == (SettingsUnion *) NULL)
{
    return (FALSE);
}

for (unsigned int i=0; i < NumAttrs; i++)
{
    inFile.read(reinterpret_cast<char*>(&groupUnion[i]),sizeof(SettingsUnion));
    if(groupUnion[i].Id == 900)
    {
        free groupUnion[i]; // this is bad how can i delete groupUnion[i] when groupUnion[i].Id == 900
        groupUnion[i] = NULL;
    }
}

inFile.close()

Thanks in Advance!!

Body:
You cannot free part of the allocated memory: free groupUnion[i]

What you can do however is to allocate individually the elements and then free them individually:

// not sure why you need the +1 (anyway you allocate an array of pointers to the struct here. Consider using new operator)
groupUnion = (SettingsUnion **) malloc(sizeof(SettingsUnion *) * (NumAttrs + 1));
if(groupUnion == (SettingsUnion *) NULL)
{
    return (FALSE);
}

for (unsigned int i=0; i < NumAttrs; i++)
{
    // you allocate the individual groupUnion here:
    groupUnion[i] = (SettingsUnion *) malloc(sizeof(SettingsUnion));
    if(groupUnion[i] == (SettingsUnion *) NULL)
    {
        return (FALSE);
    }

    inFile.read(reinterpret_cast<char*>(&groupUnion[i]),sizeof(SettingsUnion));
   if(groupUnion[i].Id == 900)
   {
        free groupUnion[i]; // this is bad how can i delete groupUnion[i] when groupUnion[i].Id == 900
        groupUnion[i] = NULL;
   }
}

inFile.close()


问:
Alternative word delimiter than underscore (_) for PostgreSQL objects (fields, tables, etc.) which doesn't require me to use quotes ("") to query?
Is there any alternative word delimiter other than underscore (_) for PostgreSQL objects (fields, tables, etc.) which doesn't require me to use quotes ("") to query?

The special delimiter will be used to separate identically named field names based on their source table. I don't want to use schemas or different tables for this. Some dummy example field names would be:

```<code>product_line^product_name
product_line^product_description
service_station^station_name
</code>```

I've tested out hat (^) and pipe (|), and they don't work.

```<code>CREATE TABLE "my^test^table" ( "my^test^field" text )
</code>```

(I used a GUI to build the tables, and I just now notice that you have to quote the names to even create the table/field.)

Here is what I have to do to query it:

```<code>SELECT "my^test^field" FROM "my^test^table"
</code>```

... while I'd like to do:

```<code>SELECT my^test^field FROM my^test^table
</code>```

... which is possible if I've used underscores (_):

```<code>SELECT my_test_field FROM my_test_table
</code>```

Are there any alternative delimiters other than underscore (_) which could work? Preferably a normal ASCII character which isn't alphanumeric.

Edit: My best alternative at the moment is to use double underscore. But, I'd prefer something else.

答:
You could use dollar signs. From the documentation:

SQL identifiers and key words must begin with a letter (a-z, but also letters with diacritical marks and non-Latin letters) or an underscore (_). Subsequent characters in an identifier or key word can be letters, underscores, digits (0-9), or dollar signs ($). Note that dollar signs are not allowed in identifiers according to the letter of the SQL standard, so their use might render applications less portable.

I do not think it is a good idea.

I often use thematic schemas. Gather objects (tables, views, functions etc) belonging to specific submodels in separate schemas, e.g.:

```<code>inventory.items
inventory.get_items()
inventory.document_workflows
sale.contractors
sale.local_orders
etc
</code>```

where inventory and sale are schemas.

ContentLicense: CC BY-SA 4.0

Body:
Is there any alternative word delimiter other than underscore (_) for PostgreSQL objects (fields, tables, etc.) which doesn't require me to use quotes ("") to query?

The special delimiter will be used to separate identically named field names based on their source table. I don't want to use schemas or different tables for this. Some dummy example field names would be:

product_line^product_name
product_line^product_description
service_station^station_name

I've tested out hat (^) and pipe (|), and they don't work.

CREATE TABLE "my^test^table" ( "my^test^field" text )

(I used a GUI to build the tables, and I just now notice that you have to quote the names to even create the table/field.)

Here is what I have to do to query it:

SELECT "my^test^field" FROM "my^test^table"

... while I'd like to do:

SELECT my^test^field FROM my^test^table

... which is possible if I've used underscores (_):

SELECT my_test_field FROM my_test_table

Are there any alternative delimiters other than underscore (_) which could work? Preferably a normal ASCII character which isn't alphanumeric.

Edit: My best alternative at the moment is to use double underscore. But, I'd prefer something else.

Body:
You could use dollar signs. From the documentation:

SQL identifiers and key words must begin with a letter (a-z, but also letters with diacritical marks and non-Latin letters) or an underscore (_). Subsequent characters in an identifier or key word can be letters, underscores, digits (0-9), or dollar signs ($). Note that dollar signs are not allowed in identifiers according to the letter of the SQL standard, so their use might render applications less portable.

I do not think it is a good idea.

I often use thematic schemas. Gather objects (tables, views, functions etc) belonging to specific submodels in separate schemas, e.g.:

inventory.items
inventory.get_items()
inventory.document_workflows
sale.contractors
sale.local_orders
etc

where inventory and sale are schemas.


问:
How can I remove a byte of type []byte
I have a variable cmd that returns [50 48 ... 50 53 10]

It's possible to remove any bytes of this var? In my case, I want to remove the last byte [10] == LF (Line Feed) to obtain: [50 48 ... 50 53]

P.S.: I have not found any similar question because the function bytes.Trim(cmd, "\x10") does not work for me, or maybe, I don't use it fine...

答:
For example,

```<code>package main

import (
    "bytes"
    "fmt"
)

func main() {
    b := []byte{50, 48, 50, 53, 10}
    fmt.Println(b)
    b = bytes.TrimSuffix(b, []byte{10}) // Line Feed
    fmt.Println(b)

    b = []byte{50, 48, 50, 53, 10}
    fmt.Println(b)
    b = bytes.TrimSuffix(b, []byte("\n")) // Line Feed
    fmt.Println(b)
}
</code>```

Output:

```<code>[50 48 50 53 10]
[50 48 50 53]
[50 48 50 53 10]
[50 48 50 53]
</code>```

Title: How can I remove a byte of type []byte

Body:
For example,

package main

import (
    "bytes"
    "fmt"
)

func main() {
    b := []byte{50, 48, 50, 53, 10}
    fmt.Println(b)
    b = bytes.TrimSuffix(b, []byte{10}) // Line Feed
    fmt.Println(b)

    b = []byte{50, 48, 50, 53, 10}
    fmt.Println(b)
    b = bytes.TrimSuffix(b, []byte("\n")) // Line Feed
    fmt.Println(b)
}

Output:

[50 48 50 53 10]
[50 48 50 53]
[50 48 50 53 10]
[50 48 50 53]


问:
C# Create Excell Cell address from row and column number without Interop dll
I am reading Excel file into DataTable without Excel interop library.
From DataTable I need to find out some value and its address relative to excel.

Example I found my value in dt.Rows[7].ItemArray[1].ToString(), so its address interms of excel should be "B8".

Like that I need to convert DataTable cell address to Excel cell address.

Here is my code that is used to read Excel file.

```<code>public DataTable getExcelSheet(string filePath, string sheetName)
    {
        var ds = new DataSet();
        var connectionString = "Provider=Microsoft.ACE.OLEDB.12.0;Data Source=" + filePath + ";Extended Properties=\"Excel 12.0;IMEX=1;HDR=NO;TypeGuessRows=0;ImportMixedTypes=Text\""; ;
        using (var conn = new OleDbConnection(connectionString))
        {
            conn.Open();

            var sheets = conn.GetOleDbSchemaTable(System.Data.OleDb.OleDbSchemaGuid.Tables, new object[] { null, null, null, "TABLE" });
            using (var cmd = conn.CreateCommand())
            {
                cmd.CommandText = "SELECT * FROM [" + sheetName + "] ";

                var adapter = new OleDbDataAdapter(cmd);
                ds = new DataSet();
                adapter.Fill(ds);
            }
            conn.Close();
        }
        return ds.Tables[0];
    }
</code>```

This function is to find out value from datatable

```<code>public String getTablePosition(DataTable dataTable, String value)
        {
            string cell = "";
            for (int rows = 0; rows < (dataTable.Rows.Count < 100 ? dataTable.Rows.Count : 100); rows++)
            {
                for (int cols = 1; cols < (dataTable.Columns.Count < 100 ? dataTable.Columns.Count : 100); cols++)
                {
                    if (dataTable.Rows[rows].ItemArray[cols].ToString() == value)
                    {
                        return ""  //here cell I need cell address like B8 or CQ15
                    }
                }
            }
            return "";
        }
</code>```

Can anyone help me in this ? I need to do this without using Excel interop library.

答:
I created function that creates cell address based on column and row number.</p>

```<code>     string[] Columns = new[] { "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z" };

 public String getExcelAddress(int row, int column)
        {
            string cellAddress = "";
            cellAddress = ((column / 26) - 1 >= 1 ? Columns[(column / 26) - 1] : "") + Columns[column % 26] + (row + 1);
            return cellAddress;
        }

        public String getTablePosition(DataTable dataTable, String value)
        {
            for (int rows = 0; rows < (dataTable.Rows.Count < 100 ? dataTable.Rows.Count : 100); rows++)
            {
                for (int cols = 1; cols < (dataTable.Columns.Count < 100 ? dataTable.Columns.Count : 100); cols++)
                {
                    if (dataTable.Rows[rows].ItemArray[cols].ToString().Trim() == value.Trim())
                    {
                        return getExcelAddress(rows, cols);
                    }
                }
            }
            return "";
        }
</code>```

Body:
I am reading Excel file into DataTable without Excel interop library.
From DataTable I need to find out some value and its address relative to excel.

Example I found my value in dt.Rows[7].ItemArray[1].ToString(), so its address interms of excel should be "B8".

Like that I need to convert DataTable cell address to Excel cell address.

Here is my code that is used to read Excel file.

public DataTable getExcelSheet(string filePath, string sheetName)
    {
        var ds = new DataSet();
        var connectionString = "Provider=Microsoft.ACE.OLEDB.12.0;Data Source=" + filePath + ";Extended Properties=\"Excel 12.0;IMEX=1;HDR=NO;TypeGuessRows=0;ImportMixedTypes=Text\""; ;
        using (var conn = new OleDbConnection(connectionString))
        {
            conn.Open();

            var sheets = conn.GetOleDbSchemaTable(System.Data.OleDb.OleDbSchemaGuid.Tables, new object[] { null, null, null, "TABLE" });
            using (var cmd = conn.CreateCommand())
            {
                cmd.CommandText = "SELECT * FROM [" + sheetName + "] ";

                var adapter = new OleDbDataAdapter(cmd);
                ds = new DataSet();
                adapter.Fill(ds);
            }
            conn.Close();
        }
        return ds.Tables[0];
    }

This function is to find out value from datatable

public String getTablePosition(DataTable dataTable, String value)
        {
            string cell = "";
            for (int rows = 0; rows < (dataTable.Rows.Count < 100 ? dataTable.Rows.Count : 100); rows++)
            {
                for (int cols = 1; cols < (dataTable.Columns.Count < 100 ? dataTable.Columns.Count : 100); cols++)
                {
                    if (dataTable.Rows[rows].ItemArray[cols].ToString() == value)
                    {
                        return ""  //here cell I need cell address like B8 or CQ15
                    }
                }
            }
            return "";
        }

Can anyone help me in this ? I need to do this without using Excel interop library.

Body:
I created function that creates cell address based on column and row number.

     string[] Columns = new[] { "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z" };

 public String getExcelAddress(int row, int column)
        {
            string cellAddress = "";
            cellAddress = ((column / 26) - 1 >= 1 ? Columns[(column / 26) - 1] : "") + Columns[column % 26] + (row + 1);
            return cellAddress;
        }

        public String getTablePosition(DataTable dataTable, String value)
        {
            for (int rows = 0; rows < (dataTable.Rows.Count < 100 ? dataTable.Rows.Count : 100); rows++)
            {
                for (int cols = 1; cols < (dataTable.Columns.Count < 100 ? dataTable.Columns.Count : 100); cols++)
                {
                    if (dataTable.Rows[rows].ItemArray[cols].ToString().Trim() == value.Trim())
                    {
                        return getExcelAddress(rows, cols);
                    }
                }
            }
            return "";
        }


问:
Get preprocessor definition value using CMake
Is there a not totally hacky way to get the value of a C preprocessor definition using CMake? For example I may want to do something like this to get the exact MSVC version.

```<code>if (CMAKE_CXX_COMPILER_ID STREQUAL "MSVC")
    get_preprocessor_value("_MSC_FULL_VER" msvc_version)
    if (msvc_version LESS 190023918)
        message(FATAL_ERROR "Visual C++ 2015 Update 2 or later is required due to a bug in std::atomic.")
    endif ()
    target_compile_definitions(mytarget PRIVATE "_ENABLE_ATOMIC_ALIGNMENT_FIX")
endif ()
</code>```

I made up get_preprocessor_value(). Is there a function that does that, or a simple way to do it. Obviously I can have CMake compile a simple program that prints it, and capture stdout, but I'm wondering if there is a built in function that does it for me.

答:
There's no built-in CMake function to do that, neither does CMake ship with a standard module to do something like that.

For the particular case of compiler version, CMake has the variable CMAKE_<LANG>_COMPILER_VERSION (such as CMAKE_CXX_COMPILER_VERSION for C++).

If that variable doesn't provide enough information for you, your best bet is to use try_run() to compile & print the macro's value, as you've mentioned in the question. I don't find this hacky at all, I'd say it's actually a pretty idiomatic way of doing stuff like that in CMake.

Body:
Is there a not totally hacky way to get the value of a C preprocessor definition using CMake? For example I may want to do something like this to get the exact MSVC version.

if (CMAKE_CXX_COMPILER_ID STREQUAL "MSVC")
    get_preprocessor_value("_MSC_FULL_VER" msvc_version)
    if (msvc_version LESS 190023918)
        message(FATAL_ERROR "Visual C++ 2015 Update 2 or later is required due to a bug in std::atomic.")
    endif ()
    target_compile_definitions(mytarget PRIVATE "_ENABLE_ATOMIC_ALIGNMENT_FIX")
endif ()

I made up get_preprocessor_value(). Is there a function that does that, or a simple way to do it. Obviously I can have CMake compile a simple program that prints it, and capture stdout, but I'm wondering if there is a built in function that does it for me.


问:
Find is not a function error
I have an array of objects in javascript like this:

```<code>array=[{label: 1, value:e}, {label:1, value: i}, {label: 2, value:l}]
</code>```

I want to find the label when value is l so I'm writing:

```<code>array.map((i) => i.find(item => item.value === 'l').label)
</code>```

But an error is returning

i.find is not a function

What am I missing?

答:
In your case, i becomes {label: 1, value:e}, then moves on to your next objects from the array. Those objects don't have a .find method. Instead, you can simply use the i.value to extract the information.

If you only want to produce an output for some of the elements, you need to filter them first, then map:

```<code>let labels = array
  .filter(i => i.value === 'l')
  .map(i => i.label)
;
</code>```

Title: Find is not a function error

Body:
I have an array of objects in javascript like this:

array=[{label: 1, value:e}, {label:1, value: i}, {label: 2, value:l}]

I want to find the label when value is l so I'm writing:

array.map((i) => i.find(item => item.value === 'l').label)

But an error is returning

i.find is not a function

What am I missing?

Body:
In your case, i becomes {label: 1, value:e}, then moves on to your next objects from the array. Those objects don't have a .find method. Instead, you can simply use the i.value to extract the information.

If you only want to produce an output for some of the elements, you need to filter them first, then map:

let labels = array
  .filter(i => i.value === 'l')
  .map(i => i.label)
;


答:
You are using the map function before your find, please see the documentation on the two function

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find

I believe to achieve the outcome you desire you just want to use the find on it's own.

In your example code the i variable is the object within your array not an array.

Title: Find is not a function error


问:
How does a web server know what linked to it?
I use photobucket to post images to various user forums.  The forums I post to allow the embedding of a direct link to the image.

One of the services photobucket provides is a view history which includes not only number of hits but also information on which sites viewed the page.  I can't figure out how they do that -- can anyone fill me in on the details?

I would like to add that ability to my own server, but isn't this a security hole in the HTTP protocol of sorts?

答:
It knows what linked to it by the HTTP referrer.
Any server side scripting language will have its own way of retrieving this information.</p>


问:
Firebase for Cordova app - Failed to fetch APNS token
I am trying to make Firebase push notifications work on an iOS device on a Cordova app using this plugin, but I am getting problem after problem. I don't even know where to start, so let me just show you my console log when I load the app.

```<code>MyApp[754:298085] Starting Firebase plugin
MyApp[754:298085] [CDVTimer][firebaseplugin] 0.200033ms
MyApp[754:298085] [CDVTimer][TotalPluginStartup] 73.943019ms
MyApp[754:298119] [Firebase/Core][I-COR000001] Configuring the default app.
MyApp[754] <Debug> [Firebase/Core][I-COR000001] Configuring the default app.
MyApp[754:298117] <FIRAnalytics/INFO> Firebase Analytics v.3404000 started
MyApp[754:] <FIRAnalytics/INFO> Firebase Analytics v.3404000 started
MyApp[754:298117] <FIRAnalytics/INFO> To enable debug logging set the following application argument: -FIRAnalyticsDebugEnabled (see some link here)
MyApp[754:] <FIRAnalytics/INFO> To enable debug logging set the following application argument: -FIRAnalyticsDebugEnabled (see some link here)
MyApp[754:298085] Firebase Crash Reporting: Successfully enabled
 <FIRInstanceID/WARNING> Failed to fetch APNS token Error Domain=com.firebase.iid Code=1001 "(null)"
 <FIRMessaging/INFO> FIRMessaging library version 1.2.0
MyApp[754:298118] [Firebase/Core][I-COR000018] Already sending logs.
MyApp[754] <Debug> [Firebase/Core][I-COR000018] Already sending logs.
MyApp[754:298118] libMobileGestalt MobileGestaltSupport.m:153: pid 754 (MyApp) does not have sandbox access for frZQaeyWLUvLjeuEK43hmg and IS NOT appropriately entitled
MyApp[754:298118] libMobileGestalt MobileGestalt.c:550: no access to InverseDeviceID (see <rdar://problem/11744455>)
MyApp[754:298124] <FIRAnalytics/WARNING> The AdSupport Framework is not currently linked. Some features will not function properly. Learn more at some link here
MyApp[754:] <FIRAnalytics/WARNING> The AdSupport Framework is not currently linked. Some features will not function properly. Learn more at some link here
MyApp[754:298119] <FIRAnalytics/INFO> Firebase Analytics enabled
MyApp[754:] <FIRAnalytics/INFO> Firebase Analytics enabled
MyApp[754:298085] Resetting plugins due to page load.
MyApp[754:298119] [Firebase/Core][I-COR000019] Clearcut post completed.
MyApp[754] <Debug> [Firebase/Core][I-COR000019] Clearcut post completed.
MyApp[754:298085] Connected to FCM.
MyApp[754:298085] InstanceID token: eD1pW3DsaUA:APA91bGSKxvd6VRf-3O1_AgQcdCL3ZLERsWDShsFy8LE6MlNLTgFl-sYH9EzvPZJn9JH-oRjvhwQrwp-h6YukJ86IQP0Q4iLnOf4GwoPgR5dV1ozLX1Fnc7bpJDMOtukAriLT8NZSAVl
MyApp[754:298132] [Firebase/Core][I-COR000019] Clearcut post completed.
2017-05-19 16:05:39.389 MyApp[754] <Debug> [Firebase/Core][I-COR000019] Clearcut post completed.
MyApp[754:298085] Finished load of: file:///var/containers/Bundle/Application/0A7C5C10-135D-4E34-A2BC-D64528786544/MyApp.app/www/index.html
MyApp[754:298085] THREAD WARNING: ['FirebasePlugin'] took '4102.684082' ms. Plugin should use a background thread.
</code>```

as you can see from all this bullsh** I am getting a FCM token, but not an APNS. I think I have uploaded every kind of needed certificate, and even a .p8 certificate in the Firebase Settings for APNS Auth Key.

I also tried to send a test notification from the Firebase Notification console using the provided push token from the debug console, but nothing arrives on the device, when in foreground or in background. I am debugging both the javascript and the native code to see that.

What else can I do, I don't even know how to check if all my certificates are ok or if I am missing something, please help.

EDIT: I have turned on the Push Notifications under Capabilities.

答: I still don't know what the problem was, but I tried with another plugin, cordova-plugin-fcm, and after I made sure the application had permission to receive pushes, and everything else on the project was configured fine, I started receiving pushes.</p>

Body:
I am trying to make Firebase push notifications work on an iOS device on a Cordova app using this plugin, but I am getting problem after problem. I don't even know where to start, so let me just show you my console log when I load the app.

MyApp[754:298085] Starting Firebase plugin
MyApp[754:298085] [CDVTimer][firebaseplugin] 0.200033ms
MyApp[754:298085] [CDVTimer][TotalPluginStartup] 73.943019ms
MyApp[754:298119] [Firebase/Core][I-COR000001] Configuring the default app.
MyApp[754] <Debug> [Firebase/Core][I-COR000001] Configuring the default app.
MyApp[754:298117] <FIRAnalytics/INFO> Firebase Analytics v.3404000 started
MyApp[754:] <FIRAnalytics/INFO> Firebase Analytics v.3404000 started
MyApp[754:298117] <FIRAnalytics/INFO> To enable debug logging set the following application argument: -FIRAnalyticsDebugEnabled (see some link here)
MyApp[754:] <FIRAnalytics/INFO> To enable debug logging set the following application argument: -FIRAnalyticsDebugEnabled (see some link here)
MyApp[754:298085] Firebase Crash Reporting: Successfully enabled
 <FIRInstanceID/WARNING> Failed to fetch APNS token Error Domain=com.firebase.iid Code=1001 "(null)"
 <FIRMessaging/INFO> FIRMessaging library version 1.2.0
MyApp[754:298118] [Firebase/Core][I-COR000018] Already sending logs.
MyApp[754] <Debug> [Firebase/Core][I-COR000018] Already sending logs.
MyApp[754:298118] libMobileGestalt MobileGestaltSupport.m:153: pid 754 (MyApp) does not have sandbox access for frZQaeyWLUvLjeuEK43hmg and IS NOT appropriately entitled
MyApp[754:298118] libMobileGestalt MobileGestalt.c:550: no access to InverseDeviceID (see <rdar://problem/11744455>)
MyApp[754:298124] <FIRAnalytics/WARNING> The AdSupport Framework is not currently linked. Some features will not function properly. Learn more at some link here
MyApp[754:] <FIRAnalytics/WARNING> The AdSupport Framework is not currently linked. Some features will not function properly. Learn more at some link here
MyApp[754:298119] <FIRAnalytics/INFO> Firebase Analytics enabled
MyApp[754:] <FIRAnalytics/INFO> Firebase Analytics enabled
MyApp[754:298085] Resetting plugins due to page load.
MyApp[754:298119] [Firebase/Core][I-COR000019] Clearcut post completed.
MyApp[754] <Debug> [Firebase/Core][I-COR000019] Clearcut post completed.
MyApp[754:298085] Connected to FCM.
MyApp[754:298085] InstanceID token: eD1pW3DsaUA:APA91bGSKxvd6VRf-3O1_AgQcdCL3ZLERsWDShsFy8LE6MlNLTgFl-sYH9EzvPZJn9JH-oRjvhwQrwp-h6YukJ86IQP0Q4iLnOf4GwoPgR5dV1ozLX1Fnc7bpJDMOtukAriLT8NZSAVl
MyApp[754:298132] [Firebase/Core][I-COR000019] Clearcut post completed.
2017-05-19 16:05:39.389 MyApp[754] <Debug> [Firebase/Core][I-COR000019] Clearcut post completed.
MyApp[754:298085] Finished load of: file:///var/containers/Bundle/Application/0A7C5C10-135D-4E34-A2BC-D64528786544/MyApp.app/www/index.html
MyApp[754:298085] THREAD WARNING: ['FirebasePlugin'] took '4102.684082' ms. Plugin should use a background thread.

as you can see from all this bullsh** I am getting a FCM token, but not an APNS. I think I have uploaded every kind of needed certificate, and even a .p8 certificate in the Firebase Settings for APNS Auth Key.

I also tried to send a test notification from the Firebase Notification console using the provided push token from the debug console, but nothing arrives on the device, when in foreground or in background. I am debugging both the javascript and the native code to see that.

What else can I do, I don't even know how to check if all my certificates are ok or if I am missing something, please help.

EDIT: I have turned on the Push Notifications under Capabilities.


问:
Select all cell values of a single row table and list it as separate row in SQL
I've a table like this

```<code>ID        col1         col2        col3      col4
---------------------------------------------------
1          a            b           c         d
2          e            f           g         h
</code>```

So if I pass the ID 2 it should return all the colum values as separate rows as this

```<code>Colum     Value
---------------------
ID        2
Col1      e
col2      f
col3      g
col4      h
</code>```

So all the cells of that single rows been splitted as separate rows.

How can I accomplish this

答:
You can use cross apply as below:</p>

```<code>Select Id as [Column], [Value]  from yourcols
    cross apply (values(col1), (col2), (col3), (col4)) rws([Value])
    where Id = 2
</code>```

Body:
I've a table like this

ID        col1         col2        col3      col4
---------------------------------------------------
1          a            b           c         d
2          e            f           g         h

So if I pass the ID 2 it should return all the colum values as separate rows as this

Colum     Value
---------------------
ID        2
Col1      e
col2      f
col3      g
col4      h

So all the cells of that single rows been splitted as separate rows.

How can I accomplish this

Body:
You can use cross apply as below:

Select Id as [Column], [Value]  from yourcols
    cross apply (values(col1), (col2), (col3), (col4)) rws([Value])
    where Id = 2


问:
CSS-Grid columns do not align properly
Basically, I often run into this kind of issue, that the columns of my grid do not align as intended. (Bootstrap, Materializecss, and others) Everytime the same issue, sometimes I get it fixed, other times I struggle for hours trying to get it work.

That's really annyoing and I really wan't to know why this issue happens and how to solve it in future projects!

The problems is the following:

I have a layout example (jsfiddle), which I want to sovle. It's using Materializecss with some sections.

```<code>  Large View (with thumbnails right)           Mobile View
+----------------------+-------------+       +----------------------+
| Section 1            | Section 2   |       | Section 1            |
|                      |             |       |                      |
+----------------------+-------------+       +----------------------+
| Image Slider Section | Thumbnails  |       | Section 2            |
|                      | # # # # # # |       |                      |
|                      | # # # # # # |       +----------------------+
|                      | # # # # # # |       | Image Slider Section |
+----------------------+-------------+       |                      |
| Section 3            | Section 4   |       |                      |
|                      |             |       |                      |
|                      +-------------+       +----------------------+
|                      | Section 5   |       | Thumbnails           |
|                      |             |       |  # # # # # # # # # # |
+----------------------+-------------+       |  # # # # # # # # # # |
| Section 6                          |       +----------------------+
|                                    |       | Section 3            |
+----------------------+-------------+       |                      |
                                             |                      |
  Large View (with thumbnails bottom)        |                      |
+----------------------+-------------+       |                      |
| Section 1            | Section 2   |       |                      |
|                      |             |       +----------------------+
+----------------------+-------------+       | Section 4            |
| Image Slider Section | Section 4   |       |                      |
|                      |             |       +----------------------+
|                      +-------------+       | Section 5            |
|                      | Section 5   |       |                      |
+----------------------+             |       +----------------------+
| Thumbnails           |-------------+       | Section 6            |
| # # # # # # # # # # #|                     |                      |
+----------------------+                     +----------------------+
| Section 3            |
|                      |
|                      |
|                      |
|                      |
|                      |
+----------------------+-------------+
| Section 6                          |
|                                    |
+----------------------+-------------+

Both large views are valuable options.
</code>```

I've been told that I should structure and order my cols with mobile-first in mind. That's the HTML:

```<code><article>
  <div class="container">
    <div class="row">
      <section class="col s12 m8">
        <h5 class="teal-text">Share Buttons Section</h5>
      </section>

      <!--<section class="col s12 m4">-->
      <!--<h5 class="teal-text">Nothing (Just a Placeholder)</h5>-->
      <!--</section>-->

      <section class="col s12 m8">
        <h5 class="teal-text">Section 1</h5>
      </section>

      <section class="col s12 m4">
        <h5 class="teal-text">Section 2</h5>
      </section>

      <section class="col s12 m8">
        <h5 class="teal-text">Pushpin Nav</h5>
      </section>

      <section class="col s12 m8">
        <h5 class="teal-text">Slider Section</h5>
        <div class="col s2 amber" style="margin: 3px; width: 100%; height: 480px"></div>
      </section>

      <section class="col s12 m8">
        <h5 class="teal-text">Slider Thumbnails</h5>
        <div class="row">
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <!--...-->
        </div>
      </section>

      <section class="col s12 m8">
        <h5 class="teal-text">Section 3</h5>
      </section>

      <section class="col s12 m4">
        <h5>Section 4</h5>
      </section>

      <section class="col s12 m4">
        <h5>Section 5</h5>
      </section>

      <section class="col s12">
        <h5>Section 6</h5>
      </section>
    </div>
  </div>
</article>
</code>```

This leaves some gaps in between the sections in the large view if the content of a section is bigger than the other remaining for this row.
Ok cool, so I came across push / pull, which I thought would reorder the columns, and fix the problem if I just push and pull them into the right order. But that causes just to "re-order" the offset in the horizontal space. Gaps still there.

What am I missing, to get the content stick together?

I really appreciate a detailed answer providing some examples, so I understand this kind of issue.

Link to my jsfiddle example:
https://jsfiddle.net/jkdzgafr/

答:
Updated

You can achieve the mentioned grid layout via flex CSS property.

for more info on CSS flex you read here

If you care about cross-compatiblity with older browsers as you should, display:flex; alone is not recommended. You need to add those old flexbox prefixes. As for IE8 and 9, you can use a table fallback. Which comes to the following rule set:

```<code>.flex-container {
  display: table;        /* IE < 10, Opera *Presto* Desktop (Now dead) */
  display: -webkit-box;  /* Safari 3.1 - 6, Chrome < 21 (2009 Spec), UCBrowser Android */
  display: -moz-box;     /* Firefox 2 - 27 (2009 Spec), UCMini Android */
  display: -ms-flexbox;  /* IE10 (2012 Syntax) */
  display: -webkit-flex; /* Safari 6.1 - 8, Android < 4.4, BB < 10, Chrome 21 - 28 */
  display: flex;         /* Edge 12+, Firefox 28+, Blink, Safari 9+, Opera Mini 8+ */
}
</code>```

For the flex items table-cell or table-row fallbacks, especially with flexbox nesting.

However, there are 3 options available:

1) Use feature detection with a script like Modernizr. And use the Modernizr CSS document styling to declare the IE8-9 fallback rules via JS feature detection. Like this:

```<code>html.no-flexbox .flex-item {
  display: table-cell;
}
</code>```

2) Use IE CSS conditional styling:

```<code><!--[if lte IE 9]>
    <link rel="stylesheet" type="text/css" href="ie-8-9-fallbacks.css" />
<![endif]-->
</code>```

OR

3) The other no-JS way is using CSS hacks. With a display value which will ignored by other browsers, and only be parsed and applied by IE8-9.

With: a)

```<code>.flex-item {
  display: block;
  display: table-cell\0/; /*IE8-10 */
}
</code>```

and/or: b)

```<code>@media \0screen\,screen\9 { /* IE6-10 and exclude FF2 */
  .flex-item { display: table-cell; }
}
</code>```

Demo for Large View (with thumbnails right) here

Demo for Large View (with thumbnails bottom) here

CSS:

```<code>.justify {
  text-align: justify;
  text-justify: inter-word;
}

@media (min-width: 600px) {
  .d-flex {
    display: flex;
  }
  .h-100p {
    height: 100%
  }
  .h-50p {
    height: 50%;
  }
  .mb-0 {
    margin-bottom: 0;
  }
}
</code>```

HTML: ( Large View - with thumbnails right )

```<code><article class="">
  <div class="container">
    <div class="row">
      <section class="col s12 m8 amber lighten-5">
        <h5 class="teal-text">Share Buttons Section</h5>
      </section>
    </div>
    <!--<section class="col s12 m4 red lighten-5">-->
    <!--<h5 class="teal-text">Nothing (Just a Placeholder)</h5>-->
    <!--</section>-->

    <div class="row d-flex">
      <section class="col s12 m8 blue lighten-5">
        <h5 class="teal-text">Section 1</h5>
        <p class="light justify">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto cum cumque deserunt dignissimos error esse expedita illum, magni nobis odit optio quas, quisquam recusandae sequi soluta tempore, vel voluptas voluptatibus.
        </p>
      </section>

      <section class="col s12 m4 red lighten-5">
        <h5 class="teal-text">Section 2</h5>
        <p class="light justify">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, pariatur?<br> Lorem: <a>Lorem ipsum dolor sit.</a>
        </p>
      </section>
    </div>
    <div class="row">
      <section class="col s12 m8 amber lighten-5">
        <h5 class="teal-text">Pushpin Nav</h5>
        <p class="light center">
          <a>Lorem-section</a> - <a>ipsum-section</a> - <a>dolor-section</a> - <a>sit-section</a>
        </p>
      </section>
    </div>
    <div class="row d-flex">
      <section class="col s12 m8 blue lighten-5">
        <h5 class="teal-text">Slider Section</h5>
        <div class="col s2 amber" style="margin: 3px; width: 100%; height: 480px"></div>
      </section>

      <section class="col s12 m4 red lighten-5">
        <h5 class="teal-text">Slider Thumbnails</h5>
        <div class="row">
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
        </div>
      </section>
    </div>
    <div class="row d-flex">
      <div class="col s12 m8">
        <div class="row mb-0">
          <section class="col s12 blue lighten-5">
            <h5 class="teal-text">Section 3</h5>
            <p class="light justify">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis officia quaerat quisquam. Animi beatae excepturi explicabo iste libero modi quae quam. Aliquid placeat similique voluptatum? Atque debitis dolores ex fuga fugit nam natus temporibus ullam
              unde. Adipisci alias aliquid aperiam aspernatur atque aut autem blanditiis distinctio, doloribus ea fuga illum inventore laudantium minus mollitia nulla officia praesentium, quidem soluta tempora, unde vel veniam. Aperiam, corporis dignissimos,
              eveniet fugiat iure neque nobis provident quas rem repellat, sit tempore ut. Assumenda aut nesciunt nihil voluptates. Ad aliquid, animi atque aut culpa debitis dolorem doloribus eaque et facere fugiat impedit in incidunt ipsa labore laborum
              natus nesciunt nisi nulla officiis perspiciatis quasi quidem quisquam quod rem rerum sint sit suscipit tenetur totam ullam vero vitae voluptas. Accusamus aliquid amet commodi dolore dolores error et hic ipsa iusto nihil nisi nobis provident
              quas quibusdam ratione saepe soluta, suscipit? Ab, asperiores autem commodi consectetur culpa cumque deleniti dolorem, doloremque eaque earum eligendi eveniet, ex expedita facere illum laudantium maxime modi neque non nulla obcaecati odio
              optio quia quisquam quod sint sunt totam unde voluptas voluptatibus. Ad aliquam architecto aspernatur assumenda commodi culpa debitis deleniti doloremque eos esse exercitationem incidunt ipsam iste laborum magnam, magni maiores molestias
              necessitatibus neque nesciunt nobis nostrum, omnis possimus provident quaerat qui quod reprehenderit sapiente temporibus totam ullam veritatis vitae voluptatum. Ab animi, delectus ducimus excepturi facilis ipsam natus nulla optio pariatur
              quod repellendus sed, similique suscipit tenetur totam! Accusantium dolor iste iure magnam modi omnis possimus, quod voluptate!Itaque, unde?
            </p>
            <p class="light justify">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis officia quaerat quisquam. Animi beatae excepturi explicabo iste libero modi quae quam. Aliquid placeat similique voluptatum? Atque debitis dolores ex fuga fugit nam natus temporibus ullam
              unde. Adipisci alias aliquid aperiam aspernatur atque aut autem blanditiis distinctio, doloribus ea fuga illum inventore laudantium minus mollitia nulla officia praesentium, quidem soluta tempora, unde vel veniam. Aperiam, corporis dignissimos,
              eveniet fugiat iure neque nobis provident quas rem repellat, sit tempore ut. Assumenda aut nesciunt nihil voluptates. Ad aliquid, animi atque aut culpa debitis dolorem doloribus eaque et facere fugiat impedit in incidunt ipsa labore laborum
              natus nesciunt nisi nulla officiis perspiciatis quasi quidem quisquam quod rem rerum sint sit suscipit tenetur totam ullam vero vitae voluptas. Accusamus aliquid amet commodi dolore dolores error et hic ipsa iusto nihil nisi nobis provident
              quas quibusdam ratione saepe soluta, suscipit? Ab, asperiores autem commodi consectetur culpa cumque deleniti dolorem, doloremque eaque earum eligendi eveniet, ex expedita facere illum laudantium maxime modi neque non nulla obcaecati odio
              optio quia quisquam quod sint sunt totam unde voluptas voluptatibus. Ad aliquam architecto aspernatur assumenda commodi culpa debitis deleniti doloremque eos esse exercitationem incidunt ipsam iste laborum magnam, magni maiores molestias
              necessitatibus neque nesciunt nobis nostrum, omnis possimus provident quaerat qui quod reprehenderit sapiente temporibus totam ullam veritatis vitae voluptatum. Ab animi, delectus ducimus excepturi facilis ipsam natus nulla optio pariatur
              quod repellendus sed, similique suscipit tenetur totam! Accusantium dolor iste iure magnam modi omnis possimus, quod voluptate! Itaque, unde?
            </p>
          </section>
        </div>
      </div>
      <div class="col s12 m4">
        <div class="row h-100p">

          <section class="col s12  red lighten-5 h-50p">
            <h5 class="teal-text">Section 4</h5>
            <p class="light justify">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam consequuntur cupiditate vero?
            </p>
          </section>

          <section class="col s12  red lighten-5 h-50p">
            <h5 class="teal-text">Section 5</h5>
            <p class="light justify">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, pariatur?<br> Lorem: <a>Lorem ipsum dolor sit.</a>
            </p>
          </section>
        </div>
      </div>

    </div>
    <section class="col s12 green lighten-5">
      <h5 class="teal-text">Section 6</h5>
      <p class="light justify">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid atque deserunt ipsa qui quisquam sunt velit. Amet aperiam architecto delectus deserunt, ducimus eos ipsam magni omnis, placeat provident qui quibusdam.
      </p>
    </section>
  </div>

</article>
</code>```

HTML: ( Large View (with thumbnails bottom) )

```<code><article class="">
  <div class="container">
    <div class="row">
      <section class="col s12 m8 amber lighten-5">
        <h5 class="teal-text">Share Buttons Section</h5>
      </section>
    </div>
      <!--<section class="col s12 m4 red lighten-5">-->
      <!--<h5 class="teal-text">Nothing (Just a Placeholder)</h5>-->
      <!--</section>-->

<div class="row d-flex">
      <section class="col s12 m8 blue lighten-5">
        <h5 class="teal-text">Section 1</h5>
        <p class="light justify">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto cum cumque deserunt dignissimos error esse expedita illum, magni nobis odit optio quas, quisquam recusandae sequi soluta tempore, vel voluptas voluptatibus.
        </p>
      </section>

      <section class="col s12 m4 red lighten-5">
        <h5 class="teal-text">Section 2</h5>
        <p class="light justify">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, pariatur?<br> Lorem: <a>Lorem ipsum dolor sit.</a>
        </p>
      </section>
</div>
    <div class="row">
      <section class="col s12 m8 amber lighten-5">
        <h5 class="teal-text">Pushpin Nav</h5>
        <p class="light center">
          <a>Lorem-section</a> - <a>ipsum-section</a> - <a>dolor-section</a> - <a>sit-section</a>
        </p>
      </section>
      </div>
<div class="row d-flex">
<div class="col s12 m8">
<div class="row mb-0">
      <section class="col s12 blue lighten-5">
        <h5 class="teal-text">Slider Section</h5>
        <div class="col s2 amber" style="margin: 3px; width: 100%; height: 480px"></div>
      </section>

      <section class="col s12 red lighten-5">
        <h5 class="teal-text">Slider Thumbnails</h5>
        <div class="row">
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
        </div>
      </section>

        <section class="col s12 blue lighten-5">
        <h5 class="teal-text">Section 3</h5>
        <p class="light justify">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis officia quaerat quisquam. Animi beatae excepturi explicabo iste libero modi quae quam. Aliquid placeat similique voluptatum? Atque debitis dolores ex fuga fugit nam natus temporibus ullam
          unde. Adipisci alias aliquid aperiam aspernatur atque aut autem blanditiis distinctio, doloribus ea fuga illum inventore laudantium minus mollitia nulla officia praesentium, quidem soluta tempora, unde vel veniam. Aperiam, corporis dignissimos,
          eveniet fugiat iure neque nobis provident quas rem repellat, sit tempore ut. Assumenda aut nesciunt nihil voluptates. Ad aliquid, animi atque aut culpa debitis dolorem doloribus eaque et facere fugiat impedit in incidunt ipsa labore laborum
          natus nesciunt nisi nulla officiis perspiciatis quasi quidem quisquam quod rem rerum sint sit suscipit tenetur totam ullam vero vitae voluptas. Accusamus aliquid amet commodi dolore dolores error et hic ipsa iusto nihil nisi nobis provident
          quas quibusdam ratione saepe soluta, suscipit? Ab, asperiores autem commodi consectetur culpa cumque deleniti dolorem, doloremque eaque earum eligendi eveniet, ex expedita facere illum laudantium maxime modi neque non nulla obcaecati odio optio
          quia quisquam quod sint sunt totam unde voluptas voluptatibus. Ad aliquam architecto aspernatur assumenda commodi culpa debitis deleniti doloremque eos esse exercitationem incidunt ipsam iste laborum magnam, magni maiores molestias necessitatibus
          neque nesciunt nobis nostrum, omnis possimus provident quaerat qui quod reprehenderit sapiente temporibus totam ullam veritatis vitae voluptatum. Ab animi, delectus ducimus excepturi facilis ipsam natus nulla optio pariatur quod repellendus
          sed, similique suscipit tenetur totam! Accusantium dolor iste iure magnam modi omnis possimus, quod voluptate!Itaque, unde?
        </p>
        <p class="light justify">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis officia quaerat quisquam. Animi beatae excepturi explicabo iste libero modi quae quam. Aliquid placeat similique voluptatum? Atque debitis dolores ex fuga fugit nam natus temporibus ullam
          unde. Adipisci alias aliquid aperiam aspernatur atque aut autem blanditiis distinctio, doloribus ea fuga illum inventore laudantium minus mollitia nulla officia praesentium, quidem soluta tempora, unde vel veniam. Aperiam, corporis dignissimos,
          eveniet fugiat iure neque nobis provident quas rem repellat, sit tempore ut. Assumenda aut nesciunt nihil voluptates. Ad aliquid, animi atque aut culpa debitis dolorem doloribus eaque et facere fugiat impedit in incidunt ipsa labore laborum
          natus nesciunt nisi nulla officiis perspiciatis quasi quidem quisquam quod rem rerum sint sit suscipit tenetur totam ullam vero vitae voluptas. Accusamus aliquid amet commodi dolore dolores error et hic ipsa iusto nihil nisi nobis provident
          quas quibusdam ratione saepe soluta, suscipit? Ab, asperiores autem commodi consectetur culpa cumque deleniti dolorem, doloremque eaque earum eligendi eveniet, ex expedita facere illum laudantium maxime modi neque non nulla obcaecati odio optio
          quia quisquam quod sint sunt totam unde voluptas voluptatibus. Ad aliquam architecto aspernatur assumenda commodi culpa debitis deleniti doloremque eos esse exercitationem incidunt ipsam iste laborum magnam, magni maiores moles
          tias necessitatibus
          neque nesciunt nobis nostrum, omnis possimus provident quaerat qui quod reprehenderit sapiente temporibus totam ullam veritatis vitae voluptatum. Ab animi, delectus ducimus excepturi facilis ipsam natus nulla optio pariatur quod repellendus
          sed, similique suscipit tenetur totam! Accusantium dolor iste iure magnam modi omnis possimus, quod voluptate! Itaque, unde?
        </p>
      </section>
      </div>
     </div>

     <div class="col s12 m4">
       <div class="row h-100p">
          <section class="col s12 h-50p  red lighten-5 h-50p">
        <h5 class="teal-text">Section 4</h5>
        <p class="light justify">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam consequuntur cupiditate vero?
        </p>
      </section>

      <section class="col s12  red lighten-5 h-50p">
        <h5 class="teal-text">Section 5</h5>
        <p class="light justify">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, pariatur?<br> Lorem: <a>Lorem ipsum dolor sit.</a>
        </p>
      </section>
       </div>
     </div>
</div>

      <section class="col s12 h-50p green lighten-5">
        <h5 class="teal-text">Section 6</h5>
        <p class="light justify">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid atque deserunt ipsa qui quisquam sunt velit. Amet aperiam architecto delectus deserunt, ducimus eos ipsam magni omnis, placeat provident qui quibusdam.
        </p>
      </section>
    </div>

</article>
</code>```

Title: CSS-Grid columns do not align properly

Body:
Basically, I often run into this kind of issue, that the columns of my grid do not align as intended. (Bootstrap, Materializecss, and others) Everytime the same issue, sometimes I get it fixed, other times I struggle for hours trying to get it work.

That's really annyoing and I really wan't to know why this issue happens and how to solve it in future projects!

The problems is the following:

I have a layout example (jsfiddle), which I want to sovle. It's using Materializecss with some sections.

  Large View (with thumbnails right)           Mobile View
+----------------------+-------------+       +----------------------+
| Section 1            | Section 2   |       | Section 1            |
|                      |             |       |                      |
+----------------------+-------------+       +----------------------+
| Image Slider Section | Thumbnails  |       | Section 2            |
|                      | # # # # # # |       |                      |
|                      | # # # # # # |       +----------------------+
|                      | # # # # # # |       | Image Slider Section |
+----------------------+-------------+       |                      |
| Section 3            | Section 4   |       |                      |
|                      |             |       |                      |
|                      +-------------+       +----------------------+
|                      | Section 5   |       | Thumbnails           |
|                      |             |       |  # # # # # # # # # # |
+----------------------+-------------+       |  # # # # # # # # # # |
| Section 6                          |       +----------------------+
|                                    |       | Section 3            |
+----------------------+-------------+       |                      |
                                             |                      |
  Large View (with thumbnails bottom)        |                      |
+----------------------+-------------+       |                      |
| Section 1            | Section 2   |       |                      |
|                      |             |       +----------------------+
+----------------------+-------------+       | Section 4            |
| Image Slider Section | Section 4   |       |                      |
|                      |             |       +----------------------+
|                      +-------------+       | Section 5            |
|                      | Section 5   |       |                      |
+----------------------+             |       +----------------------+
| Thumbnails           |-------------+       | Section 6            |
| # # # # # # # # # # #|                     |                      |
+----------------------+                     +----------------------+
| Section 3            |
|                      |
|                      |
|                      |
|                      |
|                      |
+----------------------+-------------+
| Section 6                          |
|                                    |
+----------------------+-------------+

Both large views are valuable options.

I've been told that I should structure and order my cols with mobile-first in mind. That's the HTML:

Share Buttons Section

Section 1

Section 2

Pushpin Nav

Slider Section

Slider Thumbnails

Section 3

Section 4

Section 5

Section 6

This leaves some gaps in between the sections in the large view if the content of a section is bigger than the other remaining for this row.
Ok cool, so I came across push / pull, which I thought would reorder the columns, and fix the problem if I just push and pull them into the right order. But that causes just to "re-order" the offset in the horizontal space. Gaps still there.

What am I missing, to get the content stick together?

I really appreciate a detailed answer providing some examples, so I understand this kind of issue.

Link to my jsfiddle example:
https://jsfiddle.net/jkdzgafr/

Body:
Updated

You can achieve the mentioned grid layout via flex CSS property.

for more info on CSS flex you read here

If you care about cross-compatiblity with older browsers as you should, display:flex; alone is not recommended. You need to add those old flexbox prefixes. As for IE8 and 9, you can use a table fallback. Which comes to the following rule set:

.flex-container {
  display: table;        /* IE < 10, Opera *Presto* Desktop (Now dead) */
  display: -webkit-box;  /* Safari 3.1 - 6, Chrome < 21 (2009 Spec), UCBrowser Android */
  display: -moz-box;     /* Firefox 2 - 27 (2009 Spec), UCMini Android */
  display: -ms-flexbox;  /* IE10 (2012 Syntax) */
  display: -webkit-flex; /* Safari 6.1 - 8, Android < 4.4, BB < 10, Chrome 21 - 28 */
  display: flex;         /* Edge 12+, Firefox 28+, Blink, Safari 9+, Opera Mini 8+ */
}

For the flex items table-cell or table-row fallbacks, especially with flexbox nesting.

However, there are 3 options available:

1) Use feature detection with a script like Modernizr. And use the Modernizr CSS document styling to declare the IE8-9 fallback rules via JS feature detection. Like this:

html.no-flexbox .flex-item {
  display: table-cell;
}

2) Use IE CSS conditional styling:

<!--[if lte IE 9]>
    <link rel="stylesheet" type="text/css" href="ie-8-9-fallbacks.css" />
<![endif]-->

OR

3) The other no-JS way is using CSS hacks. With a display value which will ignored by other browsers, and only be parsed and applied by IE8-9.

With: a)

.flex-item {
  display: block;
  display: table-cell\0/; /*IE8-10 */
}

and/or: b)

@media \0screen\,screen\9 { /* IE6-10 and exclude FF2 */
  .flex-item { display: table-cell; }
}

Demo for Large View (with thumbnails right) here

Demo for Large View (with thumbnails bottom) here

CSS:

.justify {
  text-align: justify;
  text-justify: inter-word;
}

@media (min-width: 600px) {
  .d-flex {
    display: flex;
  }
  .h-100p {
    height: 100%
  }
  .h-50p {
    height: 50%;
  }
  .mb-0 {
    margin-bottom: 0;
  }
}

HTML: ( Large View - with thumbnails right )

<article class="">
  <div class="container">
    <div class="row">
      <section class="col s12 m8 amber lighten-5">
        <h5 class="teal-text">Share Buttons Section</h5>
      </section>
    </div>
    <!--<section class="col s12 m4 red lighten-5">-->
    <!--<h5 class="teal-text">Nothing (Just a Placeholder)</h5>-->
    <!--</section>-->

    <div class="row d-flex">
      <section class="col s12 m8 blue lighten-5">
        <h5 class="teal-text">Section 1</h5>
        <p class="light justify">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto cum cumque deserunt dignissimos error esse expedita illum, magni nobis odit optio quas, quisquam recusandae sequi soluta tempore, vel voluptas voluptatibus.
        </p>
      </section>

      <section class="col s12 m4 red lighten-5">
        <h5 class="teal-text">Section 2</h5>
        <p class="light justify">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, pariatur?<br> Lorem: <a>Lorem ipsum dolor sit.</a>
        </p>
      </section>
    </div>
    <div class="row">
      <section class="col s12 m8 amber lighten-5">
        <h5 class="teal-text">Pushpin Nav</h5>
        <p class="light center">
          <a>Lorem-section</a> - <a>ipsum-section</a> - <a>dolor-section</a> - <a>sit-section</a>
        </p>
      </section>
    </div>
    <div class="row d-flex">
      <section class="col s12 m8 blue lighten-5">
        <h5 class="teal-text">Slider Section</h5>
        <div class="col s2 amber" style="margin: 3px; width: 100%; height: 480px"></div>
      </section>

      <section class="col s12 m4 red lighten-5">
        <h5 class="teal-text">Slider Thumbnails</h5>
        <div class="row">
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
        </div>
      </section>
    </div>
    <div class="row d-flex">
      <div class="col s12 m8">
        <div class="row mb-0">
          <section class="col s12 blue lighten-5">
            <h5 class="teal-text">Section 3</h5>
            <p class="light justify">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis officia quaerat quisquam. Animi beatae excepturi explicabo iste libero modi quae quam. Aliquid placeat similique voluptatum? Atque debitis dolores ex fuga fugit nam natus temporibus ullam
              unde. Adipisci alias aliquid aperiam aspernatur atque aut autem blanditiis distinctio, doloribus ea fuga illum inventore laudantium minus mollitia nulla officia praesentium, quidem soluta tempora, unde vel veniam. Aperiam, corporis dignissimos,
              eveniet fugiat iure neque nobis provident quas rem repellat, sit tempore ut. Assumenda aut nesciunt nihil voluptates. Ad aliquid, animi atque aut culpa debitis dolorem doloribus eaque et facere fugiat impedit in incidunt ipsa labore laborum
              natus nesciunt nisi nulla officiis perspiciatis quasi quidem quisquam quod rem rerum sint sit suscipit tenetur totam ullam vero vitae voluptas. Accusamus aliquid amet commodi dolore dolores error et hic ipsa iusto nihil nisi nobis provident
              quas quibusdam ratione saepe soluta, suscipit? Ab, asperiores autem commodi consectetur culpa cumque deleniti dolorem, doloremque eaque earum eligendi eveniet, ex expedita facere illum laudantium maxime modi neque non nulla obcaecati odio
              optio quia quisquam quod sint sunt totam unde voluptas voluptatibus. Ad aliquam architecto aspernatur assumenda commodi culpa debitis deleniti doloremque eos esse exercitationem incidunt ipsam iste laborum magnam, magni maiores molestias
              necessitatibus neque nesciunt nobis nostrum, omnis possimus provident quaerat qui quod reprehenderit sapiente temporibus totam ullam veritatis vitae voluptatum. Ab animi, delectus ducimus excepturi facilis ipsam natus nulla optio pariatur
              quod repellendus sed, similique suscipit tenetur totam! Accusantium dolor iste iure magnam modi omnis possimus, quod voluptate!Itaque, unde?
            </p>
            <p class="light justify">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis officia quaerat quisquam. Animi beatae excepturi explicabo iste libero modi quae quam. Aliquid placeat similique voluptatum? Atque debitis dolores ex fuga fugit nam natus temporibus ullam
              unde. Adipisci alias aliquid aperiam aspernatur atque aut autem blanditiis distinctio, doloribus ea fuga illum inventore laudantium minus mollitia nulla officia praesentium, quidem soluta tempora, unde vel veniam. Aperiam, corporis dignissimos,
              eveniet fugiat iure neque nobis provident quas rem repellat, sit tempore ut. Assumenda aut nesciunt nihil voluptates. Ad aliquid, animi atque aut culpa debitis dolorem doloribus eaque et facere fugiat impedit in incidunt ipsa labore laborum
              natus nesciunt nisi nulla officiis perspiciatis quasi quidem quisquam quod rem rerum sint sit suscipit tenetur totam ullam vero vitae voluptas. Accusamus aliquid amet commodi dolore dolores error et hic ipsa iusto nihil nisi nobis provident
              quas quibusdam ratione saepe soluta, suscipit? Ab, asperiores autem commodi consectetur culpa cumque deleniti dolorem, doloremque eaque earum eligendi eveniet, ex expedita facere illum laudantium maxime modi neque non nulla obcaecati odio
              optio quia quisquam quod sint sunt totam unde voluptas voluptatibus. Ad aliquam architecto aspernatur assumenda commodi culpa debitis deleniti doloremque eos esse exercitationem incidunt ipsam iste laborum magnam, magni maiores molestias
              necessitatibus neque nesciunt nobis nostrum, omnis possimus provident quaerat qui quod reprehenderit sapiente temporibus totam ullam veritatis vitae voluptatum. Ab animi, delectus ducimus excepturi facilis ipsam natus nulla optio pariatur
              quod repellendus sed, similique suscipit tenetur totam! Accusantium dolor iste iure magnam modi omnis possimus, quod voluptate! Itaque, unde?
            </p>
          </section>
        </div>
      </div>
      <div class="col s12 m4">
        <div class="row h-100p">

          <section class="col s12  red lighten-5 h-50p">
            <h5 class="teal-text">Section 4</h5>
            <p class="light justify">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam consequuntur cupiditate vero?
            </p>
          </section>

          <section class="col s12  red lighten-5 h-50p">
            <h5 class="teal-text">Section 5</h5>
            <p class="light justify">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, pariatur?<br> Lorem: <a>Lorem ipsum dolor sit.</a>
            </p>
          </section>
        </div>
      </div>

    </div>
    <section class="col s12 green lighten-5">
      <h5 class="teal-text">Section 6</h5>
      <p class="light justify">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid atque deserunt ipsa qui quisquam sunt velit. Amet aperiam architecto delectus deserunt, ducimus eos ipsam magni omnis, placeat provident qui quibusdam.
      </p>
    </section>
  </div>

</article>

HTML: ( Large View (with thumbnails bottom) )

<article class="">
  <div class="container">
    <div class="row">
      <section class="col s12 m8 amber lighten-5">
        <h5 class="teal-text">Share Buttons Section</h5>
      </section>
    </div>
      <!--<section class="col s12 m4 red lighten-5">-->
      <!--<h5 class="teal-text">Nothing (Just a Placeholder)</h5>-->
      <!--</section>-->

<div class="row d-flex">
      <section class="col s12 m8 blue lighten-5">
        <h5 class="teal-text">Section 1</h5>
        <p class="light justify">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto cum cumque deserunt dignissimos error esse expedita illum, magni nobis odit optio quas, quisquam recusandae sequi soluta tempore, vel voluptas voluptatibus.
        </p>
      </section>

      <section class="col s12 m4 red lighten-5">
        <h5 class="teal-text">Section 2</h5>
        <p class="light justify">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, pariatur?<br> Lorem: <a>Lorem ipsum dolor sit.</a>
        </p>
      </section>
</div>
    <div class="row">
      <section class="col s12 m8 amber lighten-5">
        <h5 class="teal-text">Pushpin Nav</h5>
        <p class="light center">
          <a>Lorem-section</a> - <a>ipsum-section</a> - <a>dolor-section</a> - <a>sit-section</a>
        </p>
      </section>
      </div>
<div class="row d-flex">
<div class="col s12 m8">
<div class="row mb-0">
      <section class="col s12 blue lighten-5">
        <h5 class="teal-text">Slider Section</h5>
        <div class="col s2 amber" style="margin: 3px; width: 100%; height: 480px"></div>
      </section>

      <section class="col s12 red lighten-5">
        <h5 class="teal-text">Slider Thumbnails</h5>
        <div class="row">
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
          <div class="col s2 blue" style="margin: 3px; width: 48px; height: 48px"></div>
        </div>
      </section>

        <section class="col s12 blue lighten-5">
        <h5 class="teal-text">Section 3</h5>
        <p class="light justify">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis officia quaerat quisquam. Animi beatae excepturi explicabo iste libero modi quae quam. Aliquid placeat similique voluptatum? Atque debitis dolores ex fuga fugit nam natus temporibus ullam
          unde. Adipisci alias aliquid aperiam aspernatur atque aut autem blanditiis distinctio, doloribus ea fuga illum inventore laudantium minus mollitia nulla officia praesentium, quidem soluta tempora, unde vel veniam. Aperiam, corporis dignissimos,
          eveniet fugiat iure neque nobis provident quas rem repellat, sit tempore ut. Assumenda aut nesciunt nihil voluptates. Ad aliquid, animi atque aut culpa debitis dolorem doloribus eaque et facere fugiat impedit in incidunt ipsa labore laborum
          natus nesciunt nisi nulla officiis perspiciatis quasi quidem quisquam quod rem rerum sint sit suscipit tenetur totam ullam vero vitae voluptas. Accusamus aliquid amet commodi dolore dolores error et hic ipsa iusto nihil nisi nobis provident
          quas quibusdam ratione saepe soluta, suscipit? Ab, asperiores autem commodi consectetur culpa cumque deleniti dolorem, doloremque eaque earum eligendi eveniet, ex expedita facere illum laudantium maxime modi neque non nulla obcaecati odio optio
          quia quisquam quod sint sunt totam unde voluptas voluptatibus. Ad aliquam architecto aspernatur assumenda commodi culpa debitis deleniti doloremque eos esse exercitationem incidunt ipsam iste laborum magnam, magni maiores molestias necessitatibus
          neque nesciunt nobis nostrum, omnis possimus provident quaerat qui quod reprehenderit sapiente temporibus totam ullam veritatis vitae voluptatum. Ab animi, delectus ducimus excepturi facilis ipsam natus nulla optio pariatur quod repellendus
          sed, similique suscipit tenetur totam! Accusantium dolor iste iure magnam modi omnis possimus, quod voluptate!Itaque, unde?
        </p>
        <p class="light justify">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis officia quaerat quisquam. Animi beatae excepturi explicabo iste libero modi quae quam. Aliquid placeat similique voluptatum? Atque debitis dolores ex fuga fugit nam natus temporibus ullam
          unde. Adipisci alias aliquid aperiam aspernatur atque aut autem blanditiis distinctio, doloribus ea fuga illum inventore laudantium minus mollitia nulla officia praesentium, quidem soluta tempora, unde vel veniam. Aperiam, corporis dignissimos,
          eveniet fugiat iure neque nobis provident quas rem repellat, sit tempore ut. Assumenda aut nesciunt nihil voluptates. Ad aliquid, animi atque aut culpa debitis dolorem doloribus eaque et facere fugiat impedit in incidunt ipsa labore laborum
          natus nesciunt nisi nulla officiis perspiciatis quasi quidem quisquam quod rem rerum sint sit suscipit tenetur totam ullam vero vitae voluptas. Accusamus aliquid amet commodi dolore dolores error et hic ipsa iusto nihil nisi nobis provident
          quas quibusdam ratione saepe soluta, suscipit? Ab, asperiores autem commodi consectetur culpa cumque deleniti dolorem, doloremque eaque earum eligendi eveniet, ex expedita facere illum laudantium maxime modi neque non nulla obcaecati odio optio
          quia quisquam quod sint sunt totam unde voluptas voluptatibus. Ad aliquam architecto aspernatur assumenda commodi culpa debitis deleniti doloremque eos esse exercitationem incidunt ipsam iste laborum magnam, magni maiores moles
          tias necessitatibus
          neque nesciunt nobis nostrum, omnis possimus provident quaerat qui quod reprehenderit sapiente temporibus totam ullam veritatis vitae voluptatum. Ab animi, delectus ducimus excepturi facilis ipsam natus nulla optio pariatur quod repellendus
          sed, similique suscipit tenetur totam! Accusantium dolor iste iure magnam modi omnis possimus, quod voluptate! Itaque, unde?
        </p>
      </section>
      </div>
     </div>

     <div class="col s12 m4">
       <div class="row h-100p">
          <section class="col s12 h-50p  red lighten-5 h-50p">
        <h5 class="teal-text">Section 4</h5>
        <p class="light justify">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam consequuntur cupiditate vero?
        </p>
      </section>

      <section class="col s12  red lighten-5 h-50p">
        <h5 class="teal-text">Section 5</h5>
        <p class="light justify">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, pariatur?<br> Lorem: <a>Lorem ipsum dolor sit.</a>
        </p>
      </section>
       </div>
     </div>
</div>

      <section class="col s12 h-50p green lighten-5">
        <h5 class="teal-text">Section 6</h5>
        <p class="light justify">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid atque deserunt ipsa qui quisquam sunt velit. Amet aperiam architecto delectus deserunt, ducimus eos ipsam magni omnis, placeat provident qui quibusdam.
        </p>
      </section>
    </div>

</article>


问:
Laravel - PDO - Dynamic Table Names
I am trying to delete a table with a dynamic name. I actually generate and manipulate tables dynamically, but this is the simplest of the queries.

Everything works fine when I use raw PDO, like so:

```<code>// PURE PDO VERSION
$this->db = new PDO(
    'mysql:host='   . $configParams['db_hostname']
    . ';port='      . $configParams['db_port']
    . ';dbname='    . $configParams['db_name']
    . ';charset=utf8mb4',
    $configParams['db_username'],
    $configParams['db_password']
);

$this->ps_DeleteTempTable = $db->prepare(
            "DROP TABLE `:tableName`"
        );
</code>```

But when I do the same using Laravel, like so:

```<code>// LARAVEL VERSION
$pdo = DB::connection()->getPdo();

$this->ps_DeleteTempTable = $pdo->prepare(
            "DROP TABLE `:tableName`"
        );
</code>```

I receive the following error :

SQLSTATE[42S02]: Base table or view not found: 1146 Table 'testdb.?'
  doesn't exist

I have seen other questions on SO with similar aims, but they all suggest the first query I wrote cannot be work, whereas I have been using it for over a year.

Thanks,

答:
You should add the table name as a value when building the SQL...

```<code>$pdo = DB::connection()->getPdo();

$this->ps_DeleteTempTable = $pdo->prepare(
            "DROP TABLE `".$tableName."`"
        );
</code>```

You could get some odd results when not using back ticks as the names may be reserved words. In general it's better to design the database not to use these, but some are quite common ('order' for example)

Title: Laravel - PDO - Dynamic Table Names

Body:
I am trying to delete a table with a dynamic name. I actually generate and manipulate tables dynamically, but this is the simplest of the queries.

Everything works fine when I use raw PDO, like so:

// PURE PDO VERSION
$this->db = new PDO(
    'mysql:host='   . $configParams['db_hostname']
    . ';port='      . $configParams['db_port']
    . ';dbname='    . $configParams['db_name']
    . ';charset=utf8mb4',
    $configParams['db_username'],
    $configParams['db_password']
);

$this->ps_DeleteTempTable = $db->prepare(
            "DROP TABLE `:tableName`"
        );

But when I do the same using Laravel, like so:

// LARAVEL VERSION
$pdo = DB::connection()->getPdo();

$this->ps_DeleteTempTable = $pdo->prepare(
            "DROP TABLE `:tableName`"
        );

I receive the following error :

SQLSTATE[42S02]: Base table or view not found: 1146 Table 'testdb.?'
  doesn't exist

I have seen other questions on SO with similar aims, but they all suggest the first query I wrote cannot be work, whereas I have been using it for over a year.

Thanks,

Body:
You should add the table name as a value when building the SQL...

$pdo = DB::connection()->getPdo();

$this->ps_DeleteTempTable = $pdo->prepare(
            "DROP TABLE `".$tableName."`"
        );

You could get some odd results when not using back ticks as the names may be reserved words. In general it's better to design the database not to use these, but some are quite common ('order' for example)